Добавление placeholder в select тег HTML: решение и обходные пути

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

Чтобы создать невыбираемый плейсхолдер в рамках элемента select, примените option с атрибутами disabled, selected и hidden:

<select required>
  <option value="" disabled selected hidden>Пожалуйста, выберите оружие</option>
  <!-- мечи, ножи, бластеры и прочее -->
</select>

Таким образом, "Пожалуйста, выберите оружие" становится первым появляющимся приглашением для пользователей, стимулируя их принять решение.

Обеспечим надёжность

Убедитесь в активном выборе пользователя, а не просто его игнорировании плейсхолдера. Для этого добавьте к элементу select атрибут required, который требует от пользователя сделать выбор перед отправкой формы:

<select required>
  <option value="" disabled selected hidden>Выбирайте с умом...</option>
  <!-- другие варианты -->
</select>

Установите значение value для первой опции как пустое и примените атрибут required, чтобы имитировать поведение реального плейсхолдера.

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

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

<select required>
  <option value="" disabled selected hidden class="placeholder-option">Выберите блюдо</option>
  <option value="pizza">Пицца</option>
  <option value="burger">Бургер</option>
</select>

Затем определите стиль для этого класса с помощью CSS, чтобы выделить плейсхолдер:

.placeholder-option {
  font-style: italic;
  color: #999;
}

Таким образом плейсхолдер заметнее, подчеркивая необходимость совершить выбор.

Динамическое применение стиля

Если нам требуется особенно выделить выбранный пункт, используйте JavaScript для динамического применения стилей:

document.querySelector('select').addEventListener('change', function() {
  this.className = this.value ? 'option-selected' : '';
});

Этот скрипт добавляет новый класс option-selected к элементу select при выборе опции. Его можно стилизовать по своему усмотрению.

Когда базового HTML недостаточно

В некоторых случаях базового функционала HTML может не хватить. Существует множество библиотек и фреймворков, предоставляющих расширенные компоненты select с дополнительными функциями, такими как поиск, множественный выбор и улучшенная поддержка плейсхолдеров.

Всё – игра воображения

Несмотря на то, что атрибут placeholder не применим к элементам select в HTML5, есть множество идей для его эффективной имитации с помощью CSS и data-атрибутов:

select:invalid .placeholder-option { 
  display: block;
}

select:valid .placeholder-option { 
  display: none; /* Сейчас ты меня видишь, сейчас уже не видишь! */
}

Добавьте пользовательский data-* атрибут к опции:

<select required>
  <option value="" disabled selected hidden data-placeholder="true">Сделайте выбор...</option>
</select>

Благодаря такой настройке вы сможете контролировать видимость плейсхолдера с помощью простых CSS-селекторов, зависящих от валидности элемента select.

Не забываем о доступности

Не забывайте о доступности плейсхолдера для пользователей с ограничениями. Использование ARIA-атрибутов поможет обеспечить её:

<select required aria-label="Выберите свою судьбу">
  <option value="" disabled selected hidden>Выберите...</option>
  <!-- другие варианты -->
</select>

Такой подход гарантирует, что вспомогательные технологии обязательно уведомят о цели списка select и факте отсутствия изначально выбранного значения.

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

1. <select>: HTML Select элемент – MDN — документация MDN по HTML <select> элементу.
2. Стилизация элемента Select, современный подход | CSS-Tricks — рекомендации CSS-Tricks по созданию современного <select>.
3. HTML-тег select – W3Schools — базовые учебные материалы от W3Schools по элементу <select>.
4. HTML стандарт – Элемент select — официальная спецификация HTML для элемента <select>.
5. Can I use... — справочник поддержки браузерами элемента HTML <select>.
6. WebAIM: Создание доступных форм – контрольные элементы форм — рекомендации WebAIM по созданию доступного для восприятия меню <select>.
7. web.dev — ресурс знаний о современных принципах веб-разработки, практиках и быстродействии.