CSS псевдокласс :read-write
Псевдокласс CSS :read-write выбирает элементы, доступные для редактирования пользователем. Описание и примеры.
Псевдокласс CSS :read-write соответствует любому элементу, который пользователь может редактировать, например текстовому полю, в которое можно вводить текст. Это псевдокласс пользовательского действия / ввода: он выбирает элементы на основе их текущего редактируемого состояния, а не по имени тега или классу, поэтому можно стилизовать «поле, в которое посетитель может что-то написать», без добавления дополнительной разметки.
На этой странице рассматривается, какие элементы считаются доступными для чтения и записи, синтаксис, рабочий пример, противоположный ему селектор и то, как :read-write соотносится со связанными псевдоклассами форм.
Что считается доступным для записи
Элемент соответствует :read-write, если он в данный момент редактируем. К таким элементам относятся:
- Элементы
<input>, тип которых принимает текст (text, search, url, email, password, number и т. д.) и которые не имеют атрибутовreadonlyиdisabled. - Элементы
<textarea>, не имеющие атрибутовreadonlyилиdisabled. - Любой другой элемент с атрибутом
contenteditable(например,<div contenteditable>), который делает иначе статичное содержимое редактируемым.
Противоположный случай — отключённое поле, поле readonly или любой нередактируемый элемент, например абзац, — соответствует :read-only. Каждый элемент соответствует одному из двух, поэтому :read-only и :read-write вместе охватывают весь документ.
Когда использовать
Используйте :read-write, когда хотите визуально указать, что элемент интерактивен:
- Задайте редактируемым полям отдельный фон или рамку, чтобы пользователи сразу видели, где можно вводить текст.
- Комбинируйте с
:read-only, чтобы приглушить заблокированные поля (например, в форме профиля, где адрес электронной почты фиксирован, а отображаемое имя доступно для редактирования). - Стилизуйте область
contenteditableдля форматированного текста так же, как встроенные поля ввода, для единообразного вида.
Поддержка псевдокласса :read-write широко реализована в современных браузерах, однако поведение стилизации может различаться. Фактическое редактируемое состояние элемента всегда корректно — :read-write лишь управляет применением ваших стилей, — поэтому никогда не полагайтесь на него ни для чего, кроме оформления.
Селектор :read-only является аналогом селектора :read-write. Он выбирает все элементы, которые не соответствуют :read-write.
Версия
Синтаксис
Пример синтаксиса CSS :read-write
:read-write {
css declarations;
}Здесь css declarations — правила стилей, применяемые ко всем редактируемым элементам на странице. Обычно правило ограничивают (например, input:read-write), чтобы оно не затрагивало области contenteditable, которые лучше оставить без изменений.
Пример селектора :read-write
В примере ниже первое поле ввода редактируемо, поэтому оно окрашивается в зелёный цвет с помощью :read-write. Второе поле имеет атрибут readonly, поэтому к нему применяется правило :read-only и оно отображается серым.
Пример кода CSS :read-write
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
:read-write {
background: lightgreen;
}
</style>
</head>
<body>
<h2>:read-write selector example</h2>
<form>
<div>
<label for="read-write">Example1</label>
<input value="read-write input" id="read-write" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Стилизация области contenteditable
:read-write не ограничивается полями форм. Любой элемент с атрибутом contenteditable становится редактируемым и, следовательно, соответствует :read-write, поэтому ему можно придать те же визуальные признаки, что и настоящему полю ввода:
<!DOCTYPE html>
<html>
<head>
<title>contenteditable + :read-write</title>
<style>
div:read-write {
border: 1px dashed #4caf50;
padding: 8px;
outline: none;
}
</style>
</head>
<body>
<p>Click the box below and start typing:</p>
<div contenteditable>This text is editable.</div>
</body>
</html>Поскольку <div> имеет атрибут contenteditable, правило div:read-write применяется и блок получает пунктирную рамку. Уберите атрибут — и правило перестанет совпадать.
Совместимость с браузерами
| Браузер | Поддержка |
|---|---|
| Chrome | Да |
| Firefox | Да |
| Safari | Да |
| Edge | Да |
| Opera | Да |
Связанные селекторы
:read-only— противоположный псевдокласс, соответствующий всем нередактируемым элементам.:disabledи:enabled— соответствуют элементам управления формы по состоянию отключённости.:requiredи:optional— соответствуют полям ввода в зависимости от того, обязательны ли они для заполнения.