:read-write

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

К таким элементам относятся, например, <input>, <textarea> и любые элементы с атрибутом contenteditable.

Покажем базовое использование: выделим редактируемое поле синей рамкой.

        
          
          <label>  Редактируемое поле  <input type="text" placeholder="Можно менять текст"></label><label>  Только для чтения  <input type="text" value="Нельзя редактировать" readonly class="readonly"></label><label>  Textarea (редактируемое)  <textarea placeholder="Пиши сюда..."></textarea></label>
          <label>
  Редактируемое поле
  <input type="text" placeholder="Можно менять текст">
</label>
<label>
  Только для чтения
  <input type="text" value="Нельзя редактировать" readonly class="readonly">
</label>
<label>
  Textarea (редактируемое)
  <textarea placeholder="Пиши сюда..."></textarea>
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          input:read-write,textarea:read-write {  border-color: #2E9AFF;}
          input:read-write,
textarea:read-write {
  border-color: #2E9AFF;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Это:

• <input> без атрибутов readonly и disabled
• <textarea> без readonly и disabled
• элементы с contenteditable

        
          
          input:read-write,textarea:read-write,[contenteditable]:read-write {  border: 1px solid #2E9AFF;}
          input:read-write,
textarea:read-write,
[contenteditable]:read-write {
  border: 1px solid #2E9AFF;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер автоматически определяет, можно ли изменять содержимое элемента.

Если элемент:

• не заблокирован (disabled)
• не только для чтения (readonly)
• или явно редактируем (contenteditable)

-> он попадает под :read-write.

💡 Чаще всего :read-write не используют напрямую в больших проектах, потому что его поведение почти совпадает с обычными селекторами для input/textarea.
💡 Но он полезен, если у тебя есть гибкая форма, где состояние элементов меняется динамически через JavaScript.
💡 В Firefox до сих пор может использоваться префикс:

        
          
          input:-moz-read-write {  border-color: #2E9AFF;}
          input:-moz-read-write {
  border-color: #2E9AFF;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать