Псевдоклассы :read-only и :read-write

Псевдокласс :read-only определяет стиль для элементов с установленным атрибутом readonly. Атрибут readonly в веб-форме для поля запрещает вводить или редактировать данные.

Оглавление:
  1. Применить и определить :read-only
  2. CSS для псевдоклассов :read-only и :read-write
  3. Еще псевдоклассы CSS4

Псевдокласс :read-write определяет стиль элементам для которых разрешено чтение и редактирование пользователем текстовых полей или изменение и заполнение таблиц HTML онлайн.

псевдокласс :read-write в проекте CSS4 может быть удален в любое время, поэтому не стоит заморачиваться этим псевдоклассом и рассмотрим пример с псевдоклассом :read-only.

Применить и определить :read-only

Разница между атрибутами readonly и disabled заключается в том что селектор :disabled может иметь данные для текстового поля по умолчанию. Пример применения атрибута readonly в HTML.

Поле для чтения: <input type="text" value="Не надо заполнять" readonly>
Запрещенное поле: <input type="text" value="Уже заполнено" disabled>
Нормальное поле: <input type="name" value="Имя">
  1. Элементы формы с атрибутом readonly (только для чтения) определяются как только для чтения.
  2. Элементы формы с атрибутом disabled (запрещено) определяется как заполнено (например, администратором).
  3. Нормальное текстовое поле для заполнения данных.

в настоящее время псевдокласс :read-only применяется только к полям веб-формы и к элементам с текстовой областью, но псевдокласс :read-only может применяться ко всем элементам, которые предназначены только для чтения.

Например:

<div contenteditable>Этот блок div редактируется</div>
<div>Обычный блок div</div>
к меню ↑

CSS для псевдоклассов :read-only и :read-write

Псевдоклассы :read-only и :read-write являются селекторами четвёртого уровня CSS4. Для браузера Firefox требуется префикс -moz-.

В HTML поля для чтения и записи будут с красным контуром кроме поля с атрибутом readonly.

input:-moz-read-only {
  outline: solid 1px blue;
}
input:read-only {
  outline: solid 1px blue;
}
input:-moz-read-write {
  outline: solid 1px red;
} 
input:read-write {
  outline: solid 1px red;
}

В CSS3 стиль для поля веб-формы с атрибутом readonly (только для чтения) можно определить так:

input[readonly] {
  outline: solid 1px blue;
}
Поддержка браузерами :read-only и :read-write
Internet Explorer Chrome Opera Safari Firefox Android iOS
-moz-
к меню ↑

Еще псевдоклассы CSS4