:read-write

Одно из применений readonly элементов управления формой — позволить пользователю проверить и подтвердить информацию, которую он может ввести в предыдущей форме (например, данные доставки), сохранив возможность отправить информацию вместе с остальной частью формы. Мы делаем именно это в примере ниже.

Псевдокласс :read-only используется для удаления всего стилирования, которое делает поля похожими на нажимаемые поля, делая их более похожими на текстовые параграфы только для чтения. Псевдокласс :read-write в свою очередь используется для улучшения стилизации редактируемых <textarea>.

input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

Вы можете найти полный исходный код по адресу readonly-confirmation.html; результат будет таким:

Этот селектор выбирает не только элементы <input>/<textarea> — он выберет любой элемент, который может быть отредактирован пользователем, например, элемент <p> с атрибутом contenteditable.

<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>

p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

• :read-only
• Атрибут HTML contenteditable