为组合框的背景着色

Question

我想为我的组合框着色，使其在处于非活动状态时具有灰色背景（即使在用户点击它之前也是如此）。这是我想要的一个例子：

这是我尝试的CSS：

select option {
    margin:40px;
    background-color: #ddd1d1;
    color: #000;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);

但是，css只在打开时对组合框进行着色。现在我希望能够在用户触摸它之前对其进行着色。

Answer 1

尝试将css应用于组合框：

      select{
        margin:40px;
        background-color: #ddd1d1;
        color: #000;
        text-shadow:0 1px 0 rgba(0,0,0,0.4);
      }

您提供的CSS仅将样式应用于组合框内的选项（或项目），因此当您打开组合框时，将应用样式。上面提供的css将样式应用于组合框中的所有选项。

这里有一些CSS可以帮助你找到你正在寻找的东西。它利用CSS3属性选择。

    select[disabled]{
        margin:40px;
        background-color: #ddd1d1;
        color: #000;
        text-shadow:0 1px 0 rgba(0,0,0,0.4);
    }

更新

根据评论，这是我在下拉箭头中找到的内容：

我能让它工作的唯一方法是根据this question的答案添加DIV和新的css类。基本上，你隐藏了＃34; SELECT没有禁用它（这是您通过浏览器获得CSS创意的地方）。在SELECT和DIV之间保持相同的大小，并为DIV提供所有样式。例如：

    <style>
      .selector{
        width: 200px;
        height: 34px;
        background: url(new_arrow.png) no-repeat right #ddd1d1;
        color: #000;
        text-shadow: 0 1px 0 rgba(0,0,0,0.4);
      }
      .selector select{
        background: transparent;
        width: 200px;
        height: 34px;
        /* for major browsers */
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
      }
      select option{
        background-color: #ddd1d1;
        color: #000;
        height: 34px;
        text-shadow: 0 1px 0 rgba(0,0,0,0.4);
      }
    </style>
    <div class="selector">
      <select>
        <option>Test1</option>
        <option>Test2</option>
      </select>
    </div>