样式选择下拉框答案

【问题标题】：Styling Select Drop down box样式选择下拉框
【发布时间】：2013-07-05 04:34:19
【问题描述】：

我有一个 HTML 选择下拉框，我已经设置了样式，我遇到的问题是我似乎无法设置选项的背景颜色样式。下面是一个演示链接，您可以看到下拉选项有一个白色背景，我正在尝试更改它。

这是我的 HTML 代码：

<div class="select-div">
    <select name="pagination">

      <option value="10" selected="selected">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
    </select>
    </div>

CSS 样式

  select{
    background:transparent;
    width: 170px;
    padding: 2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:600;
    color:#fff;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 22px;
    -webkit-appearance: none;

    }

    .select-div{
width: 170px;
height: 22px;
overflow: hidden;
background: url(arrowhead.png) no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 4px 4px 4px 4px;
 -moz-border-radius: 4px 4px 4px 4px;
      border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
      -moz-box-shadow:    0px 8px 3px -9px #000000;
      -webkit-box-shadow: 0px 8px 3px -9px #000000;
      box-shadow:         0px 8px 3px -9px #000000;
   }

谢谢

【问题讨论】：

另见this question。
@IwoKucharski 他说：“你可以看到下拉选项有一个白色背景，我正在尝试改变它。”。来自option 元素的background 属性，甚至select 元素都可以修改。
重复问题；回复：stackoverflow.com/questions/16409386/…

标签： css

【解决方案1】：

这是DEMO。

只需添加这个 CSS 规则：

select > option {
   background: color;
}

例如：

select > option {
   background: pink; /* Or an hexadecimal value */
}

干杯，狮子座！

【讨论】：

【解决方案2】：

很遗憾，webkit 浏览器还不支持标签样式。

检查： How to style a select tag's option element?

【讨论】：