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

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

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

试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标

在这个div中，添加宽度为55像素的select标签(大于容器宽度)

我想你会得到你想要的。

如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样

在我的情况下(最新的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;
} 

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

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

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>