样式在HTML </select>中禁用<select>(下拉框)

时间:2010-09-30 10:48:10

标签: html css accessibility

我们的一位客户很难在我们基于网络的应用程序中阅读禁用控件中的灰色文本:

IE9 example

我们希望将样式更改为浅灰色背景和黑色文本。不幸的是,大多数浏览器(包括IE,客户正在使用的)忽略禁用控件上的color: ... CSS属性,因此我们无法更改前景色。

对于文本框(input type="text"),可以使用readonly代替disabled属性轻松完成此操作。不幸的是,这不是下拉列表(select)或复选框(input type="checkbox")的选项。

有一个简单的解决方法吗?优选地,控件不需要被另一种控件替换? (...因为我们的控件是由ASP.NET呈现的)

PS:在CSS中使用[disabled]选择器没有什么区别。

6 个答案:

答案 0 :(得分:29)

在Internet Explorer 9中,将为:disabled伪选择器(ref)添加支持。我不知道这是否会尊重“颜色”属性,但似乎很可能。

在旧版本的IE中,您可以调整背景颜色(但不能调整颜色)。因此:

    <style type="text/css">
        select[disabled] { background-color: blue; }
    </style>

适用于IE 7和IE 8.您仍然无法改变前景色,但您可以更改背景颜色,以便与IE在禁用时分配的灰色形成更强烈的对比。

答案 1 :(得分:4)

这在webkit和Firefox中适用于我

select:disabled{
   opacity: 0.6;
}

答案 2 :(得分:2)

这对我有用

select[disabled='disabled']::-ms-value {
    color: red;
   }

答案 3 :(得分:1)

抱歉我的英文......

仅使用css是不可能的,IE不允许更改已禁用的选择标记的属性

答案 4 :(得分:1)

对于那些仍然发现这一点的人。

不工作:

select[disabled] { background-color: blue; }

工作:

select option [disabled] { background-color: blue; } will do

答案 5 :(得分:0)

您可以尝试以下操作:

    <style>
        /*css style for IE*/
        select[disabled='disabled']::-ms-value {
            color: #555;
        }
        /*Specific to chrome and firefox*/
        select[disabled='disabled'] {
            color: #555;
        }
    </style>