344

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

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

enter image description here

4

14 回答 14

417

无需破解或溢出。IE 上的下拉箭头有一个伪元素：

select::-ms-expand {
    display: none;
}
于 2013-09-18T17:24:38.503 回答
352

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

我找到了一个在 Chrome 和 Firefox（不在 IE 上）都运行良好的解决方案。将以下属性添加到您的 SELECT 元素的 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>

于 2013-12-09T06:55:06.917 回答
235

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

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>

于 2015-09-17T06:13:54.923 回答
66

尝试这个 ：

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

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

于 2013-05-17T07:47:04.777 回答
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;
}
于 2013-10-07T11:49:38.727 回答
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>

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

于 2014-08-06T18:27:19.973 回答
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;
}
于 2014-03-28T20:23:05.433 回答
6

正如我在 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;
}
于 2017-04-06T14:59:29.947 回答
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;

}

于 2015-04-02T06:28:14.397 回答
2

有一个名为 DropKick.js 的库，它用 HTML/CSS 替换了普通的选择下拉菜单，因此您可以使用 javascript 完全设置样式和控制它们。http://dropkickjs.com/

于 2014-10-29T00:02:51.947 回答
2

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

尝试采用 50 像素的 div 并在此右侧浮动您选择的所需下拉图标

现在在该 div 中，添加宽度为 55 像素的选择标记（可能大于容器的宽度）

我想你会得到你想要的。

如果您不希望右侧有任何放置图标，只需执行所有步骤，除了浮动右侧的图像。将 outline:0 设置为选择标签的焦点。而已

于 2013-05-17T07:48:56.177 回答
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>
于 2016-04-16T01:04:08.453 回答
1

就我而言（在最新的 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;
}
于 2021-12-08T09:45:37.220 回答
-1

如果您使用TailwindCSS ，您可以利用该appearance-none课程。

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>
于 2021-12-11T16:23:42.883 回答