Псевдокласс CSS :read-write

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

К редактируемым элементам относятся:

Элементы <input>, которые не имеют атрибута readonly и не отключены (disabled).
Элемент <textarea>, который не является только для чтения и не отключен.
Элемент, который не является <input> или <textarea>, и у которого установлен атрибут contenteditable.

INFO

Поддержка псевдокласса :read-write браузерами различается. Хотя фактическое состояние редактируемости элемента остаётся неизменным, некоторые браузеры могут не применять соответствующие стили или обрабатывать псевдокласс по-другому.

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

Версия

HTML5

Selectors Level 4

Синтаксис

Пример синтаксиса CSS :read-write

css

:read-write {
  css declarations;
}

Пример использования селектора :read-write:

Пример кода CSS :read-write

html

<!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>

Try it Yourself »

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

Браузер	Поддержка
Chrome	Да
Firefox	Да
Safari	Да
Edge	Да
Opera	Да

Практика

Что можно узнать из раздела 'Чтение/Запись' на W3Docs?

Как покрасить фон веб-страницы в CSSКак читать и записывать CSS-объявленияОсновы JavaScript и HTMLОбщий синтаксис CSS-правилКак интегрировать CSS в существующий HTML-проект

Псевдокласс CSS :read-write ​

Версия ​

Синтаксис ​

Пример использования селектора :read-write: ​