我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
当前回答
在我的情况下(最新的Mozilla版本94.0.2),
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
不工作,但检查css后,我找到了解决方案:
箭头包含在background-image中,所以我通过添加background-image来解决它:none;
我建议使用所有的规则
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: none;
}
其他回答
在我的情况下(最新的Mozilla版本94.0.2),
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
不工作,但检查css后,我找到了解决方案:
箭头包含在background-image中,所以我通过添加background-image来解决它:none;
我建议使用所有的规则
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: none;
}
正如我在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;
}
有一个叫做DropKick.js的库,它用HTML/CSS替换了正常的选择下拉列表,这样你就可以用javascript完全控制它们。http://dropkickjs.com/
如果你使用TailwindCSS 您可以利用无外观类。
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
不需要黑客或溢出。IE中有一个下拉箭头的伪元素:
select::-ms-expand {
display: none;
}