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

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

在Opera、Firefox和ie浏览器中如何做到这一点?


当前回答

试试这个:

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

其他回答

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;

}

如果你使用TailwindCSS 您可以利用无外观类。

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

试试这个:

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

试试这个:

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/

隐藏插入符号图标的一个简单易行的方法是在CSS中添加背景图像,值为none,外观为none;

select.without-icon {appearance:none;background-image:url('');} <label>with Icon</label> <select class="with-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select> <label>Without Icon</label> <select class="without-icon"> <option value="select" selected>Select</option> <option value="Html Css">HTML CSS </option> <option value="web development">Web Development</option> <option value="Front End">Front End</option> <option value="Programming">Programming</option> </select>

,就像这样:

background-image:url('');