如何删除从下拉列表（选择元素）的默认箭头图标？(How to remove the default

我想从一个HTML除去下拉箭头<select>元素。 例如：

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

怎么做在Opera，Firefox和Internet Explorer？

Answer 1:

没有必要对黑客或溢出。 有关于IE浏览器的下拉箭头，一个伪元素：

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

Answer 2:

前面提到的解决方案，与Chrome，但不是在Firefox上运行良好。

我发现了一个解决方案 ，在Chrome和Firefox（不是IE）效果很好两者。 添加以下属性到CSS为您SELECTelement并调整边距，以满足您的需求。

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

希望这可以帮助 ：）

Answer 3:

简单的方法来移除选择下拉箭头

 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> 

Answer 4:

试试这个 ：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS斌： http://jsbin.com/aniyu4/2/edit

如果您使用Internet Explorer：

select {
    overflow:hidden;
    width: 120%;
}

或者你可以使用Choosen： http://harvesthq.github.io/chosen/

Answer 5:

试试这个：

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

Answer 6:

试试这个工作对我来说，

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

你无法隐藏，而是使用溢出隐藏你其实可以让它消失。

Answer 7:

只是想完成的线程。 非常清楚，这并不在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;
}

Answer 8:

正如我的回答是取消对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;
}

Answer 9:

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;

}

Answer 10:

你不能用一个全功能的跨浏览器支持这样做。

尝试为假设50个像素的DIV，并在这一正确的浮动您选择的期望下拉图标

现在，专区内，与55个像素宽度添加所选标签也许（东西比容器的宽度更）

我想你会得到你想要的。

如果你不想在适当的任何下降的图标，只是做的所有步骤，除了浮动图像在右边。 设置轮廓：0对焦点选择标签。 而已

Answer 11:

有一个名为DropKick.js库与HTML / CSS让您可以充分的风格和JavaScript控件替换它们的正常选择下拉菜单。 http://dropkickjs.com/

Answer 12:

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

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>

文章来源: How to remove the default arrow icon from a dropdown list (select element)?