我想从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;
}

从选择中删除下拉箭头的简单方法

选择{ /*为Firefox */ -moz-appearance:没有; /* for Chrome */ -webkit-appearance:没有; } /*对于IE10 */ 选择:-ms-expand { 显示:没有; } <选择> <选项> 2000 > < /选项 <选项> 2001 > < /选项 <选项> 2002 > < /选项 < /选择>

如果你使用TailwindCSS 您可以利用无外观类。

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

有一个叫做DropKick.js的库,它用HTML/CSS替换了正常的选择下拉列表,这样你就可以用javascript完全控制它们。http://dropkickjs.com/

适用于所有浏览器和所有版本:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>