为组合框的背景着色答案

【问题标题】：color the background of a combobox为组合框的背景着色
【发布时间】：2015-06-24 19:09:35
【问题描述】：

我想在我的组合框处于非活动状态时将其着色为灰色背景（这意味着甚至在用户点击它之前）。这是我想要的一个例子：

这是我尝试过的css：

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

但是，该 css 仅在打开时为组合框着色。现在我希望能够在用户触摸它之前给它上色。

【问题讨论】：

工作小提琴 - jsfiddle.net/hrxfnd2a
@ramiramilu，谢谢。有没有办法将箭头样式也更改为与上面类似？

标签： c# asp.net-mvc visual-studio view combobox

【解决方案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 类。基本上，您是在“隐藏”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>

【讨论】：

tbm0115，效果很好。现在有办法改变箭头样式吗？
您可以查看此问题以了解箭头样式。控件的组件变得有点复杂。您通常必须为每个组件提供图像。 stackoverflow.com/questions/18092123/…