我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
当前回答
如果你使用TailwindCSS 您可以利用无外观类。
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
其他回答
试试这个:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
}
JS Bin: http://jsbin.com/aniyu4/2/edit
如果你使用Internet Explorer:
select {
overflow:hidden;
width: 120%;
}
或者你可以使用Choosen: http://harvesthq.github.io/chosen/
隐藏插入符号图标的一个简单易行的方法是在CSS中添加背景图像，值为none，外观为none;
select.without-icon {appearance:none;background-image:url('');} <label>with Icon</label> <select class="with-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select> <label>Without Icon</label> <select class="without-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select>
，就像这样:
background-image:url('');
您无法使用全功能的跨浏览器支持来实现这一点。
试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标
在这个div中，添加宽度为55像素的select标签(大于容器宽度)
我想你会得到你想要的。
如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样
不需要黑客或溢出。IE中有一个下拉箭头的伪元素:
select::-ms-expand {
display: 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;
}
