:read-write

CSS псевдоклас :read-write вказує на елемент (на кшталт input чи textarea), який може редагуватися користувачем.

Спробуйте його в дії

Синтаксис

: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; візуалізується – так:

Оформлення неформових контрольних елементів read-write

Цей селектор не просто вибирає елементи <input> і<textarea> – він вибирає всі елементи, що можуть редагуватися користувачем, наприклад, елемент <p> з атрибутом contenteditable.

<p contenteditable>
  Цей абзац – редагований, він read-write (і для зчитування, і для запису).
</p>

<p>Цей абзац – нередагований, він 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