如何从下拉列表(选择元素)中删除默认箭头图标?

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

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

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

enter image description here

676722 次浏览
小开

试试这个:

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/

小开

您无法使用全功能的跨浏览器支持来实现这一点。

试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标

在这个div中，添加宽度为55像素的select标签(大于容器宽度)

我想你会得到你想要的。

如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样

小开

不需要黑客或溢出。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;
}
小开

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

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

select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
<select>
<option>one</option>
<option>two</option>
<option>three</option>


</select>

小开

只是想完成线程。 需要明确的是，这在IE9中不起作用，但是我们可以通过css的小技巧来做到这一点 

<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>


.customselect {
width: 80px;
overflow: hidden;
border:1px solid;
}


.customselect select {
width: 100px;
border:none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
小开

试试这个，对我有用，

. 
<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你可以让它消失。

小开

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

小开 
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;

｝

小开

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

select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}


/* For IE10 */
select::-ms-expand {
display: none;
}
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>

小开

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

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

超文本标记语言

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

正如我在移除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;
}
小开

在我的情况下(最新的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;
}
小开
最佳答案

如果你使用TailwindCSS 你可以利用appearance-none类 

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

隐藏插入符号图标的一个简单易行的方法是在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('');

提交答案