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

Question

我想从HTML <select>元素中删除下拉箭头。例如：<select style="width:30px;-webkit-appearance: none;">    <option>2000</option>    <option>2001</option>    <option>2002</option>    ...</select>如何在Opera，Firefox和Internet Explorer中进行操作？

Answer 1

IE上的下拉箭头有一个伪元素：

select::-ms-expand {

    display: none;

}

Answer 2

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

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

select {

    -webkit-appearance: none;

    -moz-appearance: none;

    text-indent: 1px;

    text-overflow: '';

}

希望这可以帮助 ：）

Answer 3

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

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>