Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

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">
<!--
input{
color:green
}
/* CSS2 selector */
input[disabled]{
color:red
}

-->
</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. Селекторы».

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

Портал stavki-ru.com предоставит всем желающим информацию про онлайн ставки на формулу-1 и теннис
LiveInternet