猿问

如何从下拉列表(选择元素)中删除默认箭头图标?

我想从HTML <select>元素中删除下拉箭头。例如:


<select style="width:30px;-webkit-appearance: none;">

    <option>2000</option>

    <option>2001</option>

    <option>2002</option>

    ...

</select>

如何在Opera,Firefox和Internet Explorer中进行操作?

一只名叫tom的猫
浏览 758回答 3
3回答

白衣染霜花

IE上的下拉箭头有一个伪元素:select::-ms-expand {    display: none;}

慕桂英3389331

前面提到的解决方案适用于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: '';}希望这可以帮助 :)

慕村9548890

从选择中删除下拉箭头的简单方法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>
随时随地看视频慕课网APP
我要回答