HTML свойство disabled и его стилевые особенности

9 января 2003 г.

Возможно ли с помощью стилей установить другой цвет для заблокированных (disabled) полей формы?

Какое-то время назад мне пришло письмо следующего содержания:

Добрый день, вечер, утро %))

Дело в том, что я пишу Web-интерфейс для БД. Возникла потребность блокировать поля для ввода, но при этом цвет текста становиться бледно серым. Вот и сама проблема — никак не могу с помощью стилей установить другой цвет для заблокированных (disabled) полей. Возможно ли это вообще??
Надеюсь, вы сможете мне помочь.

С уважением, Виктория

Дорогая Виктория, хоть я и ответил Вам приватно, но думаю, что достопочтенной публике будет интересно решение Вашей проблемы, поэтому приведу его в этой заметке.

Изменить цвет возможно, но работать будет только в NN6/Mozilla. В любых других браузерах, увы, используется всегда системный цвет. Для лучшего представления давайте рассмотрим код следующий страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>enabled-disabled</title> <style type="text/css">  </style> </head><body> <form> <input value="enabled" /><br /> <input value="disabled" disabled="disabled" /> </form> </body> </html>

Как видно из листинга, для получения желаемого эффекта следует использовать CSS2 селектор input[disabled], который гласит, что элемент input, у которого определено свойство disabled, должен отображаться красным цветом. Он так и отображается, но только, повторюсь, в NN6/Mozilla. Даже последняя Opera с её прекрасной поддержкой CSS и всяческий других полезных вещей в данном контексте отдыхает, alas.

Была у меня также мысль менять цвет disabled поля с помощью JavaScript, но ожидаемого результата (смены цвета) достичь не получается.

Такие вот дела. Дополнительную информацию про CSS2 селекторы можно почерпнуть из статьи Михаила Дубакова «Кросс-браузерный CSS. Селекторы».