Руководство по CSS

CSS @ правила (RULES)

Полный список свойств CSS

Функции CSS Полное руководство по селекторам CSS

CSS :read-only селектор

:read-only CSS суррогат показывает состояние элемента, который не может быть изменен пользователем (например, заблокированный текстовый ввод).

Полное руководство по CSS-селекторам

Онлайн пример

Ввод input элемента с установленным свойством "readonly", установленный цвет фона в зеленовато-синий:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной курс (oldtoolbag.com)</title>　
<style>
input { min-width: 25em; }
input:-moz-read-only　{　background:　cyan;　}
input:read-only　{　background:　cyan;　}
p:-moz-read-only　{　background:　lightgray;　}
p:read-only　{　background:　lightgray;　}
p[contenteditable="true"]　{　color:　blue;　}
</style>
</head>
<body>
<input　type="text"　value="Введите что угодно здесь.">
<input　type="text"　value="Только для чтения."　readonly>
<p>Обычный абзац.</p>
<p　contenteditable="true">Редактируемый абзац!</p>
</body>
</html>

Проверьте, посмотрите ‹/›

Определение и использование

Селектор :read-only используется для выбора элементов, установленных с атрибутом "readonly".

Элементы формы могут устанавливать атрибут "readonly", чтобы определить элемент как только для чтения.

Внимание: В настоящее время большинство браузеров, селектор :read-only подходит для элементов input и textarea, но также подходит для элементов, установленных с атрибутом "readonly".

Совместимость с браузерами

Числа в таблице показывают первую версию браузера, поддерживающую этот атрибут.

Селекторы
:read-only	Поддерживается	Не поддерживается	-moz-	Да	Да

Грамматика CSS

/*　Выбирает любые элементы input, только для чтения, для поддержки в Firefox нужно добавить префикс -moz-　*/
input:-moz-read-only　{
　　background-color:　#ccc;
}
input:read-only　{
　　background-color:　#ccc;
}

Внимание: этот селектор не только выбирает элементы<input> с атрибутом readonly, но и все элементы, которые не могут быть отредактированы пользователем.

Связанные страницы

CSS селекторы :read-write

Полное руководство по CSS-селекторам

Функции CSS Полное руководство по селекторам CSS