这是三个解决方案：
解决方案＃1-外观：无-使用Internet Explorer 10-11解决方法
要隐藏在appearance: none选择元素上设置的默认箭头，然后使用以下命令添加您自己的自定义箭头background-image
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(...); }浏览器支持：
appearance: none具有非常好的浏览器支持（caniuse）-Internet Explorer 11（及更高版本）和Firefox 34（及更高版本）除外。
我们可以改进此技术，并通过添加以下内容来添加对Internet Explorer 10和Internet Explorer 11的支持：
select::-ms-expand { display: none; }如果担心Internet Explorer 9，则无法删除默认箭头（这意味着我们现在将有两个箭头），但是，我们可以使用时髦的Internet Explorer 9选择器。
至少撤消我们的自定义箭头-保留默认的选择箭头不变。
@media screen and (min-width:0 ) { select { background-image:none9; padding: 5px9; }}全部一起：
select { margin: 50px; width: 150px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #CCC; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;}select::-ms-expand { display: none; }@media screen and (min-width:0 ) { select { background: none9; padding: 5px9; }}<select> <option>Apples</option> <option selected>Pineapples</option> <option>Chocklate</option> <option>Pancakes</option></select>
该解决方案很简单，并且具有良好的浏览器支持-通常应该足够了。
如果需要浏览器支持Internet Explorer 9（及更高版本）和Firefox 34（及更高版本），请继续阅读…
解决方案＃2截断选择元素以隐藏默认箭头（demo）
select用固定宽度和的div 将元素包装overflow:hidden。
然后给select元素一个比div大20像素的宽度。
结果是该select元素的默认下拉箭头将被隐藏（由于overflow:hidden容器上的），并且您可以将所需的任何背景图像放置在div的右侧。
这种方法的优点是它是跨浏览器（Internet Explorer 8和更高版本，WebKit和Gecko）。但是，这种方法的缺点是，选项下拉菜单在右侧突出（被我们隐藏的20个像素…，因为选项元素采用选择元素的宽度）。
[然而，应该注意的是，如果自定义选择元素仅对于移动设备是必需的，那么上述问题就不适用，因为每部电话都会以本机方式打开选择元素。因此，对于移动设备，这可能是最好的解决方案。]
.styled select { background: transparent; width: 150px; font-size: 16px; border: 1px solid #CCC; height: 34px;}.styled { margin: 50px; width: 120px; height: 34px; border: 1px solid #111; border-radius: 3px; overflow: hidden; background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;}<div > <select> <option>Pineapples</option> <option selected>Apples</option> <option>Chocklate</option> <option>Pancakes</option> </select></div>
如果在Firefox（版本35之前）上需要自定义箭头，但您不需要支持旧版本的Internet Explorer，则请继续阅读…
解决方案＃3-使用pointer-events属性（demo）
这里的想法是在本地下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后在其上禁止指针事件。
优点：它在WebKit和Gecko中运行良好。看起来也不错（没有突出option元素）。
缺点： Internet Explorer（Internet Explorer 10及更低版本）不支持pointer-events，这意味着您无法单击自定义箭头。另外，此方法的另一个（明显）缺点是您不能用悬停效果或手形光标作为新箭头图像的目标，因为我们刚刚禁用了它们的指针事件！
但是，通过这种方法，您可以使用Modernizer或条件注释使Internet Explorer恢复为内置的标准箭头。
注意： Internet Explorer 10不再受支持conditional comments：如果要使用此方法，则可能应该使用Modernizr。但是，仍然可以通过此处描述的CSS hack从Internet Explorer 10中排除指针事件CSS 。
.notIE { position: relative; display: inline-block;}select { display: inline-block; height: 30px; width: 150px; outline: none; color: #74646E; border: 1px solid #C8BFC4; border-radius: 4px; box-shadow: inset 1px 1px 2px #DDD8DC; background: #FFF;}.notIE .fancyArrow { width: 23px; height: 28px; position: absolute; display: inline-block; top: 1px; right: 3px; background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF; pointer-events: none;}@media screen and (min-width: 0 ) { .notIE .fancyArrow { display: none; }}<!--[if !IE]> --><div > <!-- <![endif]--> <span ></span> <select> <option>Apples</option> <option selected>Pineapples</option> <option>Chocklate</option> <option>Pancakes</option> </select> <!--[if !IE]> --></div><!-- <![endif]-->
