我想从HTML <select>元素中删除下拉箭头。例如:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

在Opera、Firefox和ie浏览器中如何做到这一点?


当前回答

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

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

其他回答

不需要黑客或溢出。IE中有一个下拉箭头的伪元素:

select::-ms-expand {
    display: none;
}

试试这个:

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;
}

有一个叫做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;
} 

前面提到的解决方案适用于chrome,但不适用于Firefox。

我发现了一个解决方案,在Chrome和Firefox(不是IE)都很好。将以下属性添加到SELECTelement的CSS中,并根据需要调整margin-top。

选择{ -webkit-appearance:没有; -moz-appearance:没有; indent: 1 px; 文本溢出:“; } <选择> <选项> > < /选项之一 <选项> < /两个选项> <选项> 3 < /选项> < /选择>