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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16603979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:28:10  来源:igfitidea点击:

How to remove the default arrow icon from a dropdown list (select element)?

htmlcssdrop-down-menuhtml-select

提问by user2301515

I want to remove the dropdown arrow from a HTML <select>element. For example:

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

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

How to do it in Opera, Firefox and Internet Explorer?

如何在 Opera、Firefox 和 Internet Explorer 中执行此操作?

enter image description here

在此处输入图片说明

回答by nrutas

There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:

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

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

回答by Varun Rathore

The previously mentioned solutions work well with chrome but not on Firefox.

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

I found a Solutionthat works well both in Chrome and Firefox(not on IE). Add the following attributes to the CSS for your SELECTelement and adjust the margin-top to suit your needs.

我找到了一个在 Chrome 和 Firefox 中都运行良好的解决方案(不适用于 IE)。将以下属性添加到 SELECT 元素的 CSS 并调整 margin-top 以满足您的需要。

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

Hope this helps :)

希望这可以帮助 :)

回答by Sangeet Shah

Simple way to remove drop down arrow from select

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

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>

回答by EpokK

Try this :

尝试这个 :

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

JS Bin : http://jsbin.com/aniyu4/2/edit

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

If you use Internet Explorer :

如果您使用 Internet Explorer:

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

Or you can use Choosen : http://harvesthq.github.io/chosen/

或者你可以使用选择:http: //harvesthq.github.io/chosen/

回答by Luke Kalyan Brata Sarker

Try This:

尝试这个:

HTML:

HTML:

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

CSS:

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

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

回答by Mahesh Shitole

Try this it works for me,

试试这个对我有用,

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

You can not hide but using overflow hidden you can actually make it disappear.

您无法隐藏,但使用溢出隐藏实际上可以使其消失。

回答by sun2

Just wanted to complete the thread. To be very clear this does not works in IE9, however we can do it by little css trick.

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

回答by Tejasvi Hegde

As I answered in Remove Select arrow on IE

正如我在 IE 上的删除选择箭头中回答的那样

In case you want to use the class and pseudo-class:

如果您想使用类和伪类:

.simple-controlis your css class

.simple-control是你的css类

:disabledis pseudo class

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

回答by Mitul

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;

}

}

回答by SK.

Works for all browsers and all versions:

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

JS

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

HTML

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