我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
当前回答
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;
}
其他回答
您无法使用全功能的跨浏览器支持来实现这一点。
试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标
在这个div中，添加宽度为55像素的select标签(大于容器宽度)
我想你会得到你想要的。
如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样
前面提到的解决方案适用于chrome，但不适用于Firefox。
我发现了一个解决方案，在Chrome和Firefox(不是IE)都很好。将以下属性添加到SELECTelement的CSS中，并根据需要调整margin-top。
选择{ -webkit-appearance:没有; -moz-appearance:没有; indent: 1 px; 文本溢出:“; ｝ <选择> <选项> > < /选项之一 <选项> < /两个选项> <选项> 3 < /选项> < /选择>
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/
在我的情况下(最新的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;
}
