Добавление изображений и кнопки в выпадающий список

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

Чтобы включить изображения в выпадающий список, необходимо создать пользовательский выпадающий список используя HTML, CSS и JavaScript. Традиционный элемент select стоит заменить на структуру, основанную на div. Затем в каждый пункт списка вставьте тег img, сопровождённый текстом:

<!-- Добро пожаловать в мир пользовательского стиля -->
<div class="custom-select" onclick="toggleDropdown()">
  <div class="selected-option">
    <!-- Здесь располагается изображение по умолчанию, которое может быть изменено -->
    <img src="default_image.png" alt="">
    <span>Выберите опцию</span>
  </div>
  <!-- Скрытые опции, ожидающие раскрытия -->
  <div class="options" style="display:none;">
    <!-- Раскрываем их по одной -->
    <div class="option" onclick="selectOption('image1.png', 'Option 1')">
      <!-- Это первый вариант -->
      <img src="image1.png" alt="">
      <span>Option 1</span>
    </div>
    <div class="option" onclick="selectOption('image2.png', 'Option 2')">
      <!-- И вот второй вариант -->
      <img src="image2.png" alt="">
      <span>Option 2</span>
    </div>
  </div>
</div>

С помощью CSS придайте выпадающему списку привлекательный вид, а JavaScript поможет управлять взаимодействиями: отображением и выбором опций. Таким образом, вы получите полностью настроенный аналог стандартного выпадающего списка.

Воспользоваться JavaScript библиотеками

Для реализации кросс-браузерности и расширения функциональности используйте JavaScript библиотеки, как например, jQuery UI. Её компонент Selectmenu предоставляет гибкие возможности для создания полностью настраиваемого элемента select. С помощью него легко добавлять изображения или иконки к опциям в списке.

Благодаря jQuery UI Selectmenu вы сможете настроить внешний вид как самого поля выбора, так и выпадающего списка. Это позволяет применять фоновые изображения, элементы с иконками или даже заменить стрелку выпадающего списка на произвольное изображение, например, из набора Font Awesome.

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

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

Без изображений: Пенне, Спагетти, Фарфалле, Фузилли

С изображениями: 🖼️ Пенне, 🖼️ Спагетти, 🖼️ Фарфалле, 🖼️ Фузилли

Изображения помогают пользователю быстрее сделать правильный выбор.

CSS: волшебный инструмент для стилизации ваших опций

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

<!-- Каждой опции присущ свой уникальный стиль -->
<option style="background-image: url('image1.png');">Опция 1</option>
<option style="background-image: url('image2.png');">Опция 2</option>

Альтернативой является использование внешнего CSS для стилизации всей группы сразу:

/* Группа элементов с уникальными фоновыми изображениями */
option[value="option1"] {
  background-image: url('image1.png'); /* Опция 1 в стильном оформлении */
}
option[value="option2"] {
  background-image: url('image2.png'); /* Опция 2 не уступает в дизайне */
}

Когда браузеры ставят определённые ограничения

Некоторие веб-браузеры не поддерживают вставку изображений непосредственно в select. В этом случае используйте emoji или символы Юникода:

<option>🍔 Бургер</option> /* Не устоять перед таким предложением сложно */
<option>🍣 Суши</option> /* Что скажете о суши? */

Такие символы универсальны и широко поддерживаются.

Хитрость с использованием радиокнопок

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

<!-- Начало вашего творческого пути -->
<label class="image-option">
  <!-- Радиокнопка, скрытая от глаз -->
  <input type="radio" name="food" value="burger" />
  <!-- Вот изображение, которое привлекает внимание -->
  <img src="burger.png" alt="Бургер" />
</label>
<label class="image-option">
  <input type="radio" name="food" value="sushi" />
  <img src="sushi.png" alt="Суши" />
</label>

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

1. Как стилизовать select, будто сегодня уже 2019 | CSS-Tricks — глубокое погружение в современные стили для элемента select.
2. <select>: элемент HTML Select – HTML: Гипертекстовый язык разметки | MDN — официальная документация по корректному использованию элемента <select>.
3. Как создать пользовательские выпадающие списки — практическое руководство по созданию настраиваемых выпадающих списков.
4. Как стилизовать выпадающий список <select> используя только CSS? – Stack Overflow — форум с обсуждениями и практическими решениями по переоформлению выпадающих списков с помощью CSS.
5. Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т.д. — служба проверки поддержки веб-технологий в браузерах и анализа совместимости функционала HTML/CSS.