Реализация placeholder для 'select' в CSS и jQuery

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

Если вы хотите быстро задать placeholder в select box, обратите внимание на этот пример. Добавьте к option атрибуты disabled, selected и hidden. Их присутствие гарантирует тот факт, что пользователь не сможет снова выбрать placeholder после того как определится с выбором. Чтобы подчеркнуть placeholder, примените к select псевдоклассы :required:invalid и определите цвет как grey. Результат будет выглядеть так:

<select required>
  <option value="" disabled selected hidden>Выберите...</option>
</select>

/* Конфигурация визуализации placeholder'a */
select:required:invalid {
  color: grey;
}

Этот подход поможет создать placeholder, который будет понятным и приятным для пользователя, указывающим на необходимость выбора и поддерживающим обратную связь разработчика после реализации действия.

Внимание на placeholder

Сделайте placeholder заметным. Для этого используйте различные стили до и после выбора. Некоторые продвинутые способы с селекторами помогут вам сформировать консистентный стиль:

/* Отдельно задаем стиль для placeholder'а */
select:required:invalid {
  color: grey;
} 

/* Стиль для выбранного варианта – делаем текст черным */
select:not(:required:invalid){ 
  color: black; 
}

Не только внешний вид: функциональность и взаимодействие

Дизайн элементов select – это лишь начало. Вы можете улучшить взаимодействие ваших элементов с пользователем, благодаря небольшим дополнительным настройкам.

Дополненная доступность

С помощью меток ARIA вы сможете сделать элементы select более информативными:

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

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

JavaScript: добавим динамики

Воспользовавшись JavaScript или jQuery, вы сможете реализовать непосредственный и динамичный интерфейс:

• Динамическое изменение классов в зависимости от состояния элемента? Легко!
• Автоматическая активация обновления при изменении опции? Начнем!

Пример на чистом JavaScript:

document.querySelector('select').addEventListener('change', function() {
  this.classList.toggle('finally', this.value !== ""); // "Вот оно, выбрали что-то!"
});

Поддержка старых версий браузеров

Мы не забываем о старых версиях браузеров. Чтобы обеспечить их корректную работу, предусмотрите fallback-решения или полифиллы.

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

Рассмотрите ваш placeholder как возможность для творчества, используйте его как заметный билборд в вашем наборе select, который будет привлекать внимание пользователей:

<select>
  <option value="" disabled selected>🚧 Что вы выберете? 🚧</option>
  <option value="monet">Музей искусства Моне</option>
  <option value="vangogh">Звездное кафе Ван Гога</option>
  <option value="picasso">Уголок кубизма Пикассо</option>
</select>

Представьте каждую опцию как интересное направление, к которому стремится пользователь:

• Музей Моне 🖼️
• Звездное кафе Ван Гога 🎨
• Уголок кубизма Пикассо 🧩

А placeholder – это ваш билборд (🚧), предлагающий исследователю сделать выбор: "Сделайте свой выбор!"

Завершение: ключевые моменты и особенности использования 'select' box

Хотелось бы поделиться еще несколькими ценными советами и полезными техниками, которые пригодятся вам при использовании select box.

Отключение повторного выбора placeholder'a

Не позволяйте вашему пользователю выбирать то, что изначально предполагалось игнорировать. Поэтому placeholder option следует сделать недоступным после выбора:

<!-- Выбор завершен радикально, как только вы сделали выбор ✨ -->
<option value="" disabled selected hidden>Выберите...</option>

Визуализация "обязательности" поля

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

select:required:invalid::after {
  content: ' *';
  color: red;
}

Поддержание минимализма в дропдаун-списке

Чтобы сохранять организованность и упорядоченность в выпадающем списке без лишний элементов, скройте placeholder option после его выбора:

select option[value=""][hidden] {
  display: none; // "Сейчас я здесь, а вот уже и нет! 🎩"
}

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

1. <select>: HTML Select element – HTML: HyperText Markup Language | MDN — Погрузитесь в мир знаний о HTML <select>.
2. HTML select tag – W3Schools — Возвращение к основам HTML после продолжительного перерыва.
3. HTML Standard – The option element — Изучите элемент option изнутри.
4. Styling a Select Like It’s 2019 | CSS-Tricks — Как можно улучшить стиль элемента select.
5. How can I set the default value for an HTML <select> element? – Stack Overflow — Интересная дискуссия на тему важности установки значения по умолчанию.
6. HTML – How do I make a placeholder for a 'select' box? – Stack Overflow — Ответы на актуальные вопросы об использовании placeholder'a.
7. Accessible Rich Internet Applications (WAI-ARIA) 1.1 — Рекомендации по обеспечению доступности ваших элементов <select>.