Стилизация отключена <select>(раскрывающиеся списки) в HTML - PullRequest
19 голосов
/ 30 сентября 2010

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

IE9 example

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

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

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

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

Ответы [ 6 ]

30 голосов
/ 08 ноября 2010

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

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

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

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

4 голосов
/ 19 июня 2017

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

select:disabled{
   opacity: 0.6;
}
2 голосов
/ 29 сентября 2016

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

select[disabled='disabled']::-ms-value {
    color: red;
   }
1 голос
/ 07 сентября 2016

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

Не работает:

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

Рабочая:

select option [disabled] { background-color: blue; } will do
1 голос
/ 30 сентября 2010

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

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

0 голосов
/ 20 сентября 2018

Вы можете попробовать следующее:

    <style>
        /*css style for IE*/
        select[disabled='disabled']::-ms-value {
            color: #555;
        }
        /*Specific to chrome and firefox*/
        select[disabled='disabled'] {
            color: #555;
        }
    </style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...