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

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 {&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; -moz-appearance: none;&nbsp; &nbsp; text-indent: 1px;&nbsp; &nbsp; text-overflow: '';}希望这可以帮助 ：）

Answer 3

从选择中删除下拉箭头的简单方法select {&nbsp; /* for Firefox */&nbsp; -moz-appearance: none;&nbsp; /* for Chrome */&nbsp; -webkit-appearance: none;}/* For IE10 */select::-ms-expand {&nbsp; display: none;}<select>&nbsp; <option>2000</option>&nbsp; <option>2001</option>&nbsp; <option>2002</option></select>