你肯定应该像CSS中的样式选择、optgroup和选项那样做。在许多方面，背景色和颜色只是您通常需要的样式选项，而不是整个选择。

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

从InternetExplorer10开始，您可以使用：：-ms-expand伪元素选择器来样式和隐藏下拉箭头元素。

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

其余的样式应该与其他浏览器类似。

下面是Danield的jsfiddle的一个基本分支，它应用了对IE10的支持

以下是三种解决方案：

解决方案#1-外观：无-使用Internet Explorer 10-11解决方案（演示）

--

要隐藏默认箭头集外观，请在select元素上选择none，然后添加带有背景图像的自定义箭头

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

浏览器支持：

外观：除了Internet Explorer，没有一个浏览器支持非常好（caniuse）。

我们可以通过添加

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

如果Internet Explorer 9是一个问题，我们没有办法删除默认箭头（这意味着我们现在有两个箭头），但是，我们可以使用一个时髦的Internet Explorer 9选择器。

至少撤销我们的自定义箭头-保留默认的选择箭头不变。

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

所有这些：

选择{边距：50px；宽度：150px；填充：5px 35px 5px 5px；字体大小：16px；边框：1px实心#CCC；高度：34px；-webkit外观：无；-moz外观：无；外观：无；背景：url(https://stackoverflow.com/favicon.ico)96%/15%无重复#EEE；}/*警告：Internet Explorer黑客攻击*/select：：-ms扩展{显示：无；/*删除Internet Explorer 10和11中的默认箭头*/}/*以Internet Explorer 9为目标撤消自定义箭头*/@媒体屏幕和（最小宽度：0\0）{选择{背景：无\9；填充：5px \9；}}<选择><option>苹果</option><option selected>菠萝</option><option>楔板</option><option>煎饼</option></选择>

这个解决方案很简单，并且具有良好的浏览器支持——通常应该足够了。

如果需要Internet Explorer的浏览器支持，请提前阅读。

解决方案#2截断select元素以隐藏默认箭头（演示）

--

（在此处阅读更多信息）

用固定宽度和溢出：hidden将select元素包装在div中。

然后给select元素的宽度比div。

结果是select元素的默认下拉箭头将被隐藏（由于溢出：隐藏在容器上），您可以在div的右侧放置任何需要的背景图像。

这种方法的优点是它是跨浏览器的（Internet Explorer 8和更高版本、WebKit和Gecko）。然而，这种方法的缺点是选项下拉列表在右侧突出（我们隐藏了20个像素……因为选项元素占用了选择元素的宽度）。

[然而，需要注意的是，如果自定义选择元素仅对移动设备是必要的，那么上述问题就不适用了，因为每个手机都是以本地方式打开选择元素的。因此，对于移动设备来说，这可能是最佳解决方案。]

.styled选择{背景：透明；宽度：150px；字体大小：16px；边框：1px实心#CCC；高度：34px；}.样式{边距：50px；宽度：120px；高度：34px；边框：1px实心#111；边界半径：3px；溢出：隐藏；背景：url(https://stackoverflow.com/favicon.ico)96%/20%无重复#EEE；}<div class=“styled”><选择><option>菠萝</option><option selected>苹果</option><option>楔板</option><option>煎饼</option></选择></div>

If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of Internet Explorer - then keep reading...

Solution #3 - Use the pointer-events property (demo)

--

(Read more here)

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out option elements).

Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

NB: Being that Internet Explorer 10 doesn't support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

.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;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

您还可以向下拉列表中添加悬停样式。

选择｛position:relative；float:left；width:21.4%；height:34px；background:#f9f9e0；border:1px solid#41533f；padding:0px 10px 0px 10px；color:#41533f；margin:-10px 0px 0px 20px；backbackground:透明；字体大小：12px；-webkit外观：无；-moz外观：无(https://alt-fit.com/images/global/select-button.png)100%/15%无重复选择：悬停｛background:url(https://alt-fit.com/images/global/select-button.png)100%/15%无重复#fff；}<html><head></head><body><select name=“type”class=“select”><option style=“color:#41533f；”value=“select option”>选择选项</option><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></body></html>

这是可能的，但不幸的是，根据开发人员的要求，大多数情况下都是基于WebKit的浏览器。以下是通过内置开发人员工具检查器从Chrome选项面板收集的CSS样式示例，该检查器经过改进以匹配大多数现代浏览器中当前支持的CSS财产：

select {
  -webkit-appearance: button;
  -moz-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-padding-end: 20px;
  -moz-padding-end: 20px;
  -webkit-padding-start: 2px;
  -moz-padding-start: 2px;
  background-color: #F07575; /* Fallback color if gradients are not supported */
  background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
  background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
  background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
  background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
  background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

当您在基于WebKit的浏览器中的任何页面上运行此代码时，它应该更改选择框的外观，删除标准OS箭头并添加PNG箭头，在标签前后放置一些间距，几乎是您想要的任何内容。

最重要的部分是外观属性，它改变了元素的行为方式。

它在几乎所有基于WebKit的浏览器中都能完美工作，包括移动浏览器，尽管Gecko似乎不像WebKit那样支持外观。