:read-only

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

Стилизуем поля только для чтения, делая их визуально отличными от обычных полей:

        
          
          input:read-only {  background-color: #f5f5f5;  color: #666;  border-color: #ddd;  cursor: not-allowed;}textarea:read-only {  background-color: #f5f5f5;  color: #666;  border-color: #ddd;  cursor: not-allowed;}
          input:read-only {
  background-color: #f5f5f5;
  color: #666;
  border-color: #ddd;
  cursor: not-allowed;
}

textarea:read-only {
  background-color: #f5f5f5;
  color: #666;
  border-color: #ddd;
  cursor: not-allowed;
}

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

        
          
          <input type="text" value="Это поле только для чтения" readonly><textarea readonly>Это текстовое поле тоже только для чтения</textarea><input type="text" value="Обычное поле для ввода">
          <input type="text" value="Это поле только для чтения" readonly>
<textarea readonly>Это текстовое поле тоже только для чтения</textarea>
<input type="text" value="Обычное поле для ввода">

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

Псевдокласс :read-only применяется к тегам для ввода текста (<input> или <textarea>) с атрибутом readonly. Также может быть применён к html-тегам, для которых установлен атрибут contenteditable.

После селектора для поля ввода текста (<input> и <textarea>) или селектора с атрибутом contenteditable ставим двоеточие и пишем ключевое слово read-only.
В браузере Firefox :read-onlyтакже поддерживается с префиксом -moz: :-moz-read-only.

        
          
          /* Базовый синтаксис */input:read-only {  /* стили */}/* Для Firefox */input:-moz-read-only {  /* стили */}
          /* Базовый синтаксис */
input:read-only {
  /* стили */
}

/* Для Firefox */
input:-moz-read-only {
  /* стили */
}

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

:read-only применяется к элементам, которые пользователь не может редактировать, но может взаимодействовать с ними (получить фокус, выделить текст, скопировать содержимое).

Основные случаи использования:

• Поля с атрибутом readonly - пользователь видит данные, но не может их изменить
• Элементы с contenteditable="false" - контент нельзя редактировать
• Системные поля - например, поля с автоматически вычисляемыми значениями

Отличие от :disabled:

• :read-only - поле получает фокус, можно выделить и скопировать текст
• :disabled - поле не получает фокус, текст нельзя выделить

💡 Используйте :read-only чтобы сделать поля только для чтения заметно отличными от обычных полей.

💡 Рекомендуется установить cursor: not-allowed для полей только для чтения, чтобы показать, что их нельзя редактировать.

💡 Используйте приглушённые цвета фона и текста для полей только для чтения.

💡 :read-only хорошо работает вместе с :focus и :hover для создания интерактивных стилей.