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

Question

我想从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)的解决方案.将以下属性添加到SELECTelement的CSS中,并调整margin-top以满足您的需要.

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

希望这可以帮助 :)

Answer 3

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

Answer 4

试试这个 :

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

或者您可以使用选择: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

就我而言（在最新的 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;
} 

Answer 8

只是想完成这个主题.要非常清楚这在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 9

如果您使用TailwindCSS 您可以利用该类appearance-none。

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

Answer 10

正如我在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;
}