我想从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你可以让它消失。
其他回答
正如我在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;
}
前面提到的解决方案适用于chrome，但不适用于Firefox。
我发现了一个解决方案，在Chrome和Firefox(不是IE)都很好。将以下属性添加到SELECTelement的CSS中，并根据需要调整margin-top。
选择{ -webkit-appearance:没有; -moz-appearance:没有; indent: 1 px; 文本溢出:“; ｝ <选择> <选项> > < /选项之一 <选项> < /两个选项> <选项> 3 < /选项> < /选择>
试试这个:
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;
}
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;
}
有一个叫做DropKick.js的库，它用HTML/CSS替换了正常的选择下拉列表，这样你就可以用javascript完全控制它们。http://dropkickjs.com/
