Добавление чекбоксов в выпадающее меню HTML и CSS

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

Стандартные элементы HTML форм, такие как <select> и <option>, не предполагают внедрения в них чекбоксов. Однако, используя наше умение решать нестандартные задачи, мы вполне можем создать пользовательский выпадающий список, заменив элемент выбора HTML списком, и добиться нужного виджета, стилизовав его с помощью CSS и добавив интерактивность с помощью JavaScript. Посмотрите на базовый пример:

<div class="dropdown">
  <span>Выберите опции</span>
  <ul>
    <li><input type="checkbox" id="opt1"><label for="opt1">Опция 1</label></li>
    <!-- скажем, это компоненты для состава вашей пиццы -->
    <li><input type="checkbox" id="opt2"><label for="opt2">Опция 2</label></li>
    <!-- где каждый компонент — это опция, а чекбокс — это его подтверждение -->
    <li><input type="checkbox" id="opt3"><label for="opt3">Опция 3</label></li>
    <!-- отмеченный чекбокс говорит "добавьте это к моей пицце" -->
  </ul>
</div>

.dropdown { display: inline-block; cursor: pointer; /* курсор-указатель для пользователя */}
.dropdown > span { border: 1px solid #ccc; padding: 5px; border-radius: 3px; }
.dropdown ul { display: none; position: absolute; background: white; list-style-type: none; padding: 0; }
.dropdown:hover ul { display: block; /* плавное появление списка при наведении */}
.dropdown input[type="checkbox"] { margin-right: 5px; /* добавляет пространство вокруг чекбокса */}

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

Добавление интерактивности: Истории с JS

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

Отслеживание действий пользователя с помощью JavaScript

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

// Набор вкусных ингредиентов для пиццы
const toppings = ["пепперони", "грибы", "ветчина", "ананас"]; // кто заказывает с ананасами?

// Функция для переключения видимости выпадающего списка
document.querySelector('.dropdown').addEventListener('click', function(event) {
  this.querySelector('ul').style.display = 'block';
  event.stopPropagation(); // прекращаем дальнейшую передачу события!
});

window.addEventListener('click', function() {
  document.querySelector('.dropdown ul').style.display = 'none';
});

Скрипт «наблюдает» за кликами пользователей: по выпадающему списку, чтобы развернуть его, и вне его, чтобы свернуть. Ничего неожиданного!

Кроссбраузерность: Вечная борьба с браузерами

Всякий браузер у себя в уме, когда дело касается интерпретации CSS и JavaScript. Например, Internet Explorer может не увидеть современные функции. Не забудьте проверить совместимость на ресурсе Can I Use.

Применение готовых решений: библиотеки на помощь

Фреймворки и библиотеки, как Bootstrap Multiselect или jQuery's multiple-select, помогут более просто решить задачу интеграции чекбоксов.

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

Использование чекбоксов в выпадающем списке аналогично добавлению дополнительной колонки в таблице данных:

| Опция    | Чекбокс ✅ |
| -------- | -------- |
| Опция 1  |    ✅     |
| Опция 2  |           |
| Опция 3  |           |
| Опция 4  |    ✅     |

Здесь Опция 1 и Опция 4 помечены как выбранные, что напоминает список для покупок!

Дальнейшее стилизование и эффекты

Усовершенствование стиля чекбоксов с помощью CSS

Если вы хотите полностью контролировать внешний вид чекбокса, дерзайте использовать псевдоэлементы CSS:

/* Оформление чекбокса */
.dropdown input[type="checkbox"]::before {
  content: "✔"; /* символ галочки Unicode */
  display: none;
  /* Галочка скрыта... */
}

.dropdown input[type="checkbox"]:checked::before {
  display: inline;
  /* и вот она появилась перед глазами пользователя. */
}

Будущее интерактивности: Современные JS фреймворки

Любителям Vue.js, React или Angular будут интересны возможности этих фреймворков, которые предлагают удобное управление состоянием для разработки весьма интерактивного и динамичного UI.

// Пример компонента на React
class MultiSelectDropdown extends React.Component {
  // Состояние и методы для управления чекбоксами и выпадающим списком
  render() {
    return (
      // Здесь будет рендериться наш кастомный компонент с чекбоксами,
      // возможно, каждый чекбокс будет отдельным мини-компонентом React – увлекательно, не правда ли?
    );
  }
}

Практическое применение: Реальные примеры

Чекбоксы внутри элемента выбора можно использовать не только в базовых формах. Они идеальны для фильтрации таблиц, настройки панелей управления или интерактивных опросов, обеспечивая выбор сразу нескольких вариантов.

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

1. <select>: HTML элемент выбора – HTML: HyperText Markup Language | MDN — детальное описание и рекомендации по использованию элемента <select> в HTML.
2. HTML select tag – W3Schools — уроки и примеры использования тега <select> в HTML.
3. Custom Styling Form Inputs With Modern CSS Features | CSS-Tricks — способы стилизации форм и элементов ввода, включая элемент <select>, с использованием CSS.
4. HTML Standard – The Option Element — стандарт для элемента <option> в HTML.
5. Sensible Forms: A Form Usability Checklist – A List Apart — лучшие практики и контрольный список для удобства использования форм, включая сложные элементы.
6. Can I use... Support tables for HTML5, CSS3, etc — таблицы совместимости HTML элемента <select> с различными браузерами и платформами.
7. Custom Select Dropdown with Checkboxes – CodePen — интерактивный пример с кодом для реализации пользовательского выпадающего списка с чекбоксами.