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

我发现了一个解决方案，在Chrome和Firefox(不是IE)都很好。将以下属性添加到SELECTelement的CSS中，并根据需要调整margin-top。

选择{ -webkit-appearance:没有; -moz-appearance:没有; indent: 1 px; 文本溢出:“; ｝ <选择> <选项> > < /选项之一 <选项> < /两个选项> <选项> 3 < /选项> < /选择>

只是想把这个话题讲完。 很明显，这在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;
}

试试这个:

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/

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

选择{ /*为Firefox */ -moz-appearance:没有; /* for Chrome */ -webkit-appearance:没有; ｝ /*对于IE10 */ 选择:-ms-expand { 显示:没有; ｝ <选择> <选项> 2000 > < /选项 <选项> 2001 > < /选项 <选项> 2002 > < /选项 < /选择>

隐藏插入符号图标的一个简单易行的方法是在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('');

有一个叫做DropKick.js的库，它用HTML/CSS替换了正常的选择下拉列表，这样你就可以用javascript完全控制它们。http://dropkickjs.com/