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


297

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

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

如何在Opera,Firefox和Internet Explorer中进行操作?

在此处输入图片说明


-隐藏在Firefox的一些答案/黑客stackoverflow.com/questions/5912791/...
andyb

2
外观 #slectType { -webkit-appearance: none; appearance: none /*menulist*/ !重要; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;}浏览[CH:-webkit,FF:-moz,IE:-ms,Oprea:-o];
亚什


Answers:


382

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

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

22
因为问题在于如何删除IE中的下拉箭头。IE9没有此功能,但是可以在IE10中使用。因此,除非您使用Windows XP,否则仍应使用IE10。IE11快用完了。另一个选择是丑陋的CSS hack,以隐藏实际的下拉按钮并自己制作。
nrutas

2
链接这里是隐藏溢出的丑陋
骇客

1
在IE11中工作。格拉西亚斯!
ConorLuddy

这在Firefox中不起作用。使用下面的Varun Rathore的Firefox解决方案。
AlmostPitt

1
这仅适用于IE。当然,它在Firefox中无法使用。
nrutas

289

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

我找到了一个在Chrome和Firefox(不适用于IE)上都可以很好运行的解决方案。将以下属性添加到SELECTelement的CSS中,并调整边距顶部以适合您的需求。

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

希望这可以帮助 :)


9
从31版开始,此技巧已停止在Firefox上运行(自2014年5月起在Nightly build中)。让我们看看在此期间可以做什么。这要点我写了完整的内幕:gist.github.com/joaocunha/6273016
若昂·库尼亚

JoäoCunha的方法已成功检查并使用。当您签出时,别忘了在firefox中打开链接!
NoobishPro 2014年

它为我工作。我想将其用于wkhtmltopdf以从html生成pdf。谢谢
Faisal

186

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

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>


4
我只用于appearance: noneChrome和Firefox Quantum(v59及更高版本)。即无需供应商前缀
CPHPython

2
@CPHPython到此评论为止,大多数浏览器仍然在其上带有“带有前缀的部分支持”标签...
Dan

2
@CPHPython,您需要在项目上安装Autoprefixer才能使未添加前缀appearance: none的文件起作用。大多数浏览器仍然需要前缀。
Daniel Tonon

@DanielTonon哦,也许我正在使用一些类似的postcss包。我记不清了,但是我认为我在发表评论之前先检查了浏览器的检查器。
CPHPython

58

尝试这个 :

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/


1
您是否在IE和firefox中测试了JSBin?我仍然在两者中都看到内置的下拉箭头。
马丁·史密斯

选中“选择”,我认为这是最佳选择。
EpokK

“如果您使用Internet Explorer”?您需要不管考虑谁做使用IE浏览器,并满足他们的人口大%
丹尼·马奥尼

我们的网站用户统计如下:5.21%IE或2.37%Edge
珠穆朗玛峰

“如果您使用IE”是正确的,则更适合说“如果您需要支持IE”,但是在当今时代,如果您正在运行网络,则应该将技术适当地面向受众以开发人员为目标的网站,那么我怀疑您需要支持IE的任何版本。
Brandito '18 -4-11

17

尝试这个:

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

15

试试这个对我有用

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

您不能隐藏,但使用隐藏的溢出实际上可以使其消失。


6

只是想完成线程。很清楚,这在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;
}


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

}


2

您不能通过功能全面的跨浏览器支持来执行此操作。

尝试假设一个50像素的div并在此图标的右侧浮动所需的所需下拉图标

现在在该div内,添加选择标记,其宽度可能为55像素(比容器的宽度大一些)

我想您会得到想要的。

如果您不希望在右侧显示任何放置图标,只需执行所有步骤即可,除了在右侧浮动图像。将select标记的轮廓设置为0。而已


1
这些提示我无能为力。有人可以在这里提供适当的代码吗?谢谢。
user2301515 2013年

2

有一个名为DropKick.js的库,该库用HTML / CSS替换了普通的select下拉列表,因此您可以完全使用javascript设置样式并对其进行控制。http://dropkickjs.com/


2

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

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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.