Стилизация атрибута readonly в CSS: эффективные решения

Быстрый ответ

Для изменения визуального отображения полей ввода, недоступных для изменения, используйте селектор [readonly] в CSS:

input[readonly] {
  background: #e0e0e0;
  color: #6d6d6d;
}

Этот код позволит выделить поля ввода, доступные только для чтения, особенным стилем.

Более подробное объяснение

Поля с атрибутом readonly содержат информацию, которую нельзя редактировать. Важно визуально отметить такое поле, чтобы пользователи понимали его специфику.

Использование псевдокласса :read-only

Псевдокласс :read-only идеально подходит для стилизации полей ввода, которые доступны только для чтения. Вот пример:

input:read-only {
  border: 2px dashed #9e9e9e; /* Служит знаком "Не преодолевать" для полей ввода */
}

К сожалению, IE не поддерживает псевдокласс :read-only. Однако вы можете обеспечить кроссбраузерную совместимость, используя совместно селектор атрибута:

input[readonly], input:read-only {
  outline: none;
  cursor: not-allowed; /* Сегодня не день для изменений, пользователь ✋ */
}

Продвинутые приемы работы с селекторами

Исключение неверных значений false

Если JavaScript ошибочно задает значение readonly="false", следующий навороченный прием может быть полезен:

input:read-only:not([readonly="false"]) {
  background-color: #f7f7f7; /* Теперь вы обеспечены от невнимательного JavaScript */
}

Подробнее об этом расскажет наш спикер на видео

Применение стилей к textarea и другим типам полей ввода

Атрибут readonly может быть применен не только к input, но и к элементам типа textarea. Важно обеспечить единообразие стилизации:

textarea[readonly] {
  opacity: 0.5; /* Привидение 😱 */
}

Можно также стилизовать определенные типы полей ввода:

input[type='text']:read-only,
input[type='email']:read-only {
  background-color: #f0f0f0; /* Освежающе, как огурец */
}

Визуализация

Атрибут readonly можно воспринимать как неотъемлемую черту характера: спокойный, элегантный и неприступный.

[🖼🔒✨] /* Рассматриваем, но не трогаем */

Использование грамотно подобранных стилей поможет сделать такие поля выразительными и заметно "недоступными" для изменений:

input[readonly] {
  border: 2px solid blue; /* Вид подобный люксу, это круто, не так ли? */
  background-color: lightgray; /* Эффект матового стекла – элегантность и сдержанность */
}

Решение проблем совместимости в браузерах

Учет особенностей старых браузеров

Поскольку псевдокласс :read-only относительно нов, старые браузеры, такие как IE, не поддерживают его. Однако у нас есть варианты решения проблемы:

• Используйте селектор атрибута [readonly]
• При необходимости воспользуйтесь полифилами на JavaScript

Особенности работы в Firefox

Для Firefox есть специальный псевдокласс :-moz-read-only:

/* Для Firefox, с любовью ❤️ */
input:-moz-read-only {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Скромное затемнение, не являющееся навязчивым */
}

HTML против JavaScript

Использование булевых атрибутов в HTML

В HTML более приветствуется явное обозначение readonly="readonly":

<input type="text" name="example" readonly="readonly"> /* Устойчивый старый HTML уважает четкость */

Динамическое изменение стилей через JavaScript

Для динамического изменения атрибутов с помощью JavaScript, можно воспользоваться следующим маршрутом:

// JavaScript в граффити
document.getElementById('myInput').setAttribute('readonly', 'readonly');

/* И CSS принимает эстафету */
[readonly] {
  cursor: default; /* Потому что стрелка, обозначающая возможное действие, здесь неуместна */
}

Полезные материалы

1. :read-only – CSS: Каскадные таблицы стилей | MDN — MDN раскрывает все особенности :read-only.
2. Всё, что вам нужно знать о CSS-селекторах атрибутов | CSS-Tricks — Погрузитесь в мир CSS-селекторов атрибутов.
3. Selectors Level 3 — Изучите канон CSS-селекторов от W3C.
4. Разница между параметрами disabled и readonly – Stack Overflow — Обсуждение разницы между 'disabled' и 'readonly'.
5. :read-only и :read-write | Codrops — Codrops исследует сложный мир псевдоклассов readonly и read-write.