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

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

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

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

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

:read-write CSS-псевдокласс代表着一个元素 (например, элемент input с вводимым текстом) может быть изменен пользователем.

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

Если элемент input не только для чтения, то есть у него нет атрибута "readonly", то стиль поля ввода устанавливается в цвет orange:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
<style>
input:read-write
{
　　　　background-color: orange;
}
input:-moz-read-write {
　　background-color: #bbf;
}
</style>
</head>
<body>
<h3>Пример селектора :read-write.</h3>
<p>Обычный элемент input:<br><input value="hello"></p>
<p>Элемент input с только чтением:<br><input readonly value="hello"></p>
<p>Селектор :read-write выбирает элементы, у которых не установлено свойство "readonly".</p>
</body>
</html>

Проверьте, <br>›/›

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

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

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

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

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

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

Грамматика CSS

/* Выбирает все редактируемые элементы <input> */
/* В Firefox необходимо добавить префикс */
input:-moz-read-write {
　　background-color: #bbf;
}
/* Поддерживается в Blink/WebKit/Edge без префикса */
input:read-write {
　　background-color: #bbf;
}

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

Соответствующие страницы

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

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

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