[asp.net-mvc]组合框的背景色

发布时间: 2017/3/25 13:25:15
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要颜色我的组合框时就是处于非活动状态 (意义甚至之前用户点击它),有灰色的背景。 这里是我想要的一个示例︰

enter image description here

这是我用过的 css:

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

然而,该 css 只颜色组合框时打开。现在我想能够之前用户甚至摸一下它的颜色。

解决方法 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);
    }

更新

每评论,下面是我发现的下拉箭头︰

我可以把它做的工作,唯一的办法是添加 DIV 和一个新的 css 类,如对这一问题的答案。基本上,你"躲" SELECT 没有禁用它 (这是你哪里创意与你的 CSS 跨浏览器)。保持相同的大小两者之间 SELECTDIV ,给 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>


官方微信
官方QQ群
31647020