Отключение полей формы через CSS: возможно ли это?

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

Чтобы визуализировать дезактивацию поля формы, примените CSS-свойства pointer-events: none;, user-select: none; и задайте opacity: 0.5;, чтобы сигнализировать об отключённом состоянии.

.disabled-look { 
  pointer-events: none; 
  user-select: none; 
  opacity: 0.5; 
}

Прикрепите класс .disabled-look к требуемым элементам формы:

<input class="disabled-look" />
<select class="disabled-look"></select>
<textarea class="disabled-look"></textarea>

Почему только CSS недостаточно?

Свойство pointer-events блокирует взаимодействие мышью, имитируя отключенный элемент. Однако стилизация через CSS не изменяет функциональное состояние поля — оно все же доступно для скринридеров.

JavaScript приходит на помощь

Для полного деактивирования поля следует использовать JavaScript-свойство disabled. Так элемент будет исключен из отправляемой формы и станет недоступен для вспомогательных технологий.

На JavaScript это выглядит следующим образом:

document.getElementById("myInput").disabled = true;

Если вы используете jQuery:

$( "#myInput" ).prop( "disabled", true );

Важность доступности

Использование CSS для визуального оформления и JavaScript для функциональной изменяемости обеспечивает хорошее пользовательское удобство и доступность, что значимо для всех посетителей вашего сайта.

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

Ниже представлены CSS-правила, которые меняют вид ваших полей, делая их визуально неактивными:

Стартуем гонку за заполнение: [🏁] [📝] [🔘] [✅] [🔒]  // Вперёд!

form input[disabled], form select[disabled], form textarea[disabled] {
  pointer-events: none;  // Пожалуйста, не можем прикоснуться!
  color: #cccccc;  // Серый – новый чёрный
}

Теперь давайте сделаем их "неприкасаемыми" с помощью CSS:

CSS нажал на тормоза: [🚦] [🚫📝] [🚫🔘] [🚫✅] [🔒]   // Гонка приостановлена

Теперь эти поля не реагируют на взаимодействие, словно призраки.

Когда CSS не может справиться

Валидация форм

Стилизация полей с помощью CSS не отменяет их проверку и отправку, если это не предусмотрено логикой формы.

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

Адаптивность

JavaScript позволяет динамически менять состояние полей, активизируя или дезактивируя их в зависимости от действий пользователя.

Совместимость

Не все браузеры поддерживают свойство pointer-events, поэтому важно проверять работоспособность форм на разных устройствах и в разных веб-обозревателях. Не существует стандартных решений HTML5 или универсальных CSS-альтернатив для дезактивации полей, что делает тестирование просто необходимым.

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

1. pointer-events | CSS-Tricks
2. pointer-events – CSS: Cascading Style Sheets | MDN
3. Как отключить выделение текста в HTML/CSS | W3Schools
4. Pointer Events – W3C
5. WebAIM: Создание доступных форм – Доступные элементы управления формами