Styling отключен <select> (выпадающие окна) в HTML

Один из наших клиентов с трудом читает серый текст в отключенных элементах управления в нашем веб-приложении:

IE9 example

Мы хотели бы изменить стиль на светло-серый фон и черный текст. К сожалению, большинство браузеров (включая IE, которые использует клиент) игнорируют атрибут color: ... CSS для отключенных элементов управления, поэтому мы не можем изменить цвет переднего плана.

Для текстовых полей (input type="text") это можно легко обойти, используя readonly вместо атрибута disabled. К сожалению, это не вариант для выпадающих списков (select) или флажков (input type="checkbox").

Есть ли простой способ обхода? Предпочитаете ли вы, что контроль не нужно заменять другим типом управления? (... поскольку наши элементы управления отображаются ASP.NET)

PS: Использование селектора [disabled] в CSS не имеет значения.

Ответы

Ответ 1

В Internet Explorer 9 будет добавлена ​​поддержка псевдо-селектора :disabled (ref). Я не знаю, будет ли это уважать свойство "color", но оно кажется вероятным.

В более старых версиях IE вы можете настроить цвет фона (но не цвет). Таким образом:

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

Это работает в IE 7 и IE 8. Вы по-прежнему не можете изменить цвет переднего плана, но можете изменить цвет фона, чтобы более сильно контрастировать с серым цветом, который IE присваивает ему при его отключении.

Ответ 2

Извините за мой английский...

Это невозможно использовать с помощью CSS, IE не позволяет изменять свойства отключенного тега select

Ответ 3

Для тех, кто все еще находит это.

Не работает:

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

В:

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

Ответ 4

Это сработало для меня

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

Ответ 5

Это сработало для меня в webkit и Firefox

select:disabled{
   opacity: 0.6;
}