样式已停用< select> （下拉框） [英] Styling disabled <select> (dropdown boxes) in HTML

问题描述

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

我们要将样式更改为浅灰色背景和黑色文本。不幸的是，大多数浏览器（包括IE，这是客户使用的）忽略禁用控件上的 color：... CSS属性，因此我们不能更改前景色。

对于文本框（ input type =text），可以使用 readonly 而不是 disabled 属性。不幸的是，这不是下拉菜单（ select ）或复选框（ input type =checkbox）的选项。 / p>

有没有简单的解决方法？首选一个控件不需要被另一个类型的控件替换？ （...因为我们的控件是由ASP.NET渲染的）

PS：使用 [disabled]

在Internet Explorer 9中，将为添加支持， ：disabled 伪选择器（ ref ）。

在旧版本的IE中，您可以调整背景颜色（但不能调整）颜色）。因此：

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

在IE 7和IE 8中有效。您仍然无法更改前景色，可以更改背景颜色与IE禁用时分配的灰色更强烈地对比。

One of our customers has a hard time reading the grey text in disabled controls in our web-based application:

We would like to change the style to a light grey background and a black text. Unfortunately, most browsers (including IE, which is what the customer is using) ignore the color: ... CSS attribute on disabled controls, so we cannot change the foreground color.

For text boxes (input type="text"), this can easily be workarounded by using the readonly instead of the disabled attribute. Unfortunately, this is not an option for dropdowns (select) or checkboxes (input type="checkbox").

Is there an easy workaround for that? Preferebly one where the control does not need to be replaced by another type of control? (...since our controls are rendered by ASP.NET)

PS: Using the [disabled] selector in CSS does not make a difference.

解决方案

In Internet Explorer 9, support will be added for the :disabled pseudo-selector (ref). I don't know whether that will honor the "color" property, but it seems likely.

In older versions of IE, you can adjust the background color (but not the color). Thus:

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

That works in IE 7 and IE 8. You still can't alter the foreground color, but you can change the background color to contrast more strongly with the gray that IE assigns it when it's disabled.

这篇关于样式已停用< select> （下拉框）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！