Как создать красивый всплывающий список select

0
1983

С помощью CSS3 мы создадим красивый всплывающий список <select>. В результате мы получим следующее:

Реализация <select> списка

Для создания такого всплывающего <select> списка разметим страницу:

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

Затем, переопределить правила для придания своего стиля данному списку:

Так как список открывается по нажатию на стрелочку справа от него, то придадим её соответствующий внешний вид:

Значение свойства content представляет собой указатель на таблицу символов, значение \25BC — это стрелочка вниз.

Для плавности анимации добавим transition на :hover:

Результат:

Красивый select список

Красивый select список

Итоговый CSS код

Надеюсь это пришлось Вам полезным. Спасибо за внимание!

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя