我想从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浏览器中如何做到这一点?
当前回答
试试这个,对我有用,
<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>
你不能隐藏,但是使用overflow hidden你可以让它消失。
其他回答
在我的情况下(最新的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;
}
只是想把这个话题讲完。 很明显,这在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;
}
不需要黑客或溢出。IE中有一个下拉箭头的伪元素:
select::-ms-expand {
display: none;
}
从选择中删除下拉箭头的简单方法
选择{ /*为Firefox */ -moz-appearance:没有; /* for Chrome */ -webkit-appearance:没有; } /*对于IE10 */ 选择:-ms-expand { 显示:没有; } <选择> <选项> 2000 > < /选项 <选项> 2001 > < /选项 <选项> 2002 > < /选项 < /选择>