Нативные Select’ы на любой вкус.

Вступление

Пример работы нативного селекта с кастомной стилизацией инпута

Проблема

Поиск решения

  1. Попытка стриггерить событие клика.
  2. Попытка раскрыть список программно.
  1. Кнопка потеряла стили для :hover и :active state, так как на самом деле пользователь делает :hover и :active с селектом.
  2. Табуляция идет как по селектам, так и по кнопкам. Причем клик на кнопку ничего не дает.
  1. Запрещаем табуляцию по кнопкам, добавляем tabindex=”-1"
  2. Переносим в html структуре select перед button. Выставляем для button (при помощи элемента .select-button__button) z-index: 1, а для .select-button__select: z-index: 2
  3. При помощи селектора .select-button__select:focus + .select-button__button задаем стили для :focus. Например, в моем случае, это может быть border-color: #0c59a7;

Браузерная поддержка

--

--

--

Lead developer at talantix.ru

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mostovoy Nikita

Mostovoy Nikita

Lead developer at talantix.ru

More from Medium

How to reduce a background-image sharpness and opacity.

Masai Collaboration Project- HomeDepot Clone

Styling an input range to have different track heights before and after the thumb

5 must have VS-Code Extensions for Web-Developers