如何从下拉列表（选择元素）中删除默认箭头图标？

正如我在IE上的“删除选择”箭头中回答的那样

如果要使用类和伪类：

.simple-control 是你的CSS课

:disabled 是伪类

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

您不能通过功能全面的跨浏览器支持来执行此操作。

尝试假设50像素的div并在此图标的右侧浮动所需的所需下拉图标

现在在该div中，添加宽度为55像素的select标签（比容器的宽度大一些）

我想您会得到想要的。

如果您不希望在右侧显示任何放置图标，只需执行所有步骤即可，除了将图像浮动在右侧之外。将select标记的轮廓设置为0。而已

只是想完成线程。非常清楚，这在IE9中不起作用，但是我们可以通过一点CSS技巧来做到这一点。

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

尝试这个：

HTML：

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS：

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

尝试这个 ：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin：http：//jsbin.com/aniyu4/2/edit

如果您使用Internet Explorer：

select {
    overflow:hidden;
    width: 120%;
}

或者，您可以使用Choosen：http : //harvesthq.github.io/chosen/

试试这个对我有用

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

您不能隐藏，但使用隐藏的溢出实际上可以使其消失。

从选择中删除下拉箭头的简单方法

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

前面提到的解决方案适用于chrome，但不适用于Firefox。

我找到了一个在Chrome和Firefox（不适用于IE）上都可以很好运行的解决方案。将以下属性添加到SELECTelement的CSS中，并调整边距顶部以适合您的需求。

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

希望这可以帮助 ：）

无需黑客或溢出。IE上的下拉箭头有一个伪元素：

select::-ms-expand {
    display: none;
}