我想从HTML <select>元素中删除下拉箭头。例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在Opera、Firefox和ie浏览器中如何做到这一点?
当前回答
有一个叫做DropKick.js的库，它用HTML/CSS替换了正常的选择下拉列表，这样你就可以用javascript完全控制它们。http://dropkickjs.com/
其他回答
不需要黑客或溢出。IE中有一个下拉箭头的伪元素:
select::-ms-expand {
display: none;
}
有一个叫做DropKick.js的库，它用HTML/CSS替换了正常的选择下拉列表，这样你就可以用javascript完全控制它们。http://dropkickjs.com/
您无法使用全功能的跨浏览器支持来实现这一点。
试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标
在这个div中，添加宽度为55像素的select标签(大于容器宽度)
我想你会得到你想要的。
如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样
如果你使用TailwindCSS 您可以利用无外观类。
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
试试这个，对我有用，
<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你可以让它消失。
