:read-only

Базовая линия Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

Псевдокласс :read-only CSS псевдокласса выбирает элементы (например, определённые типы <input> и <textarea>), которые не могут быть отредактированы пользователем. Элементы, на которые не влияет атрибут HTML readonly (например, <input type="radio">, <input type="checkbox"> и все другие не-форменные элементы) также выбираются псевдоклассом :read-only. Фактически, :read-only соответствует всему, что не соответствует :read-write, что делает его эквивалентным :not(:read-write).

Попробовать

Синтаксис

:read-only {
  /* ... */
}

Примеры

Подтверждение информации формы с помощью элементов read-only или read-write

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

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

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

textarea:read-write {
  outline: 1px dashed red;
  outline-offset: 2px;
  border-radius: 5px;
}

Стилевое оформление элементов read-only, не являющихся элементами формы

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

<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;
}

Спецификации

Спецификация
Стандарт HTML # selector-read-only
Селекторы Уровня 4 # rw-pseudos

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:read-only`	1	13	781.5	9	4	18	794	10.1	3.2	1.0	≤37

См. также

:read-write
Атрибут HTML contenteditable

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only