为组合框的背景着色

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 class。基本上，您是 "hiding" 和 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>

为组合框的背景着色

color the background of a combobox

c#

asp.net-mvc

combobox

view

visual-studio

更新