10 бесплатных сниппетов окна выбора CSS и JavaScript

Поля выбора HTML по умолчанию хорошо служили нам десятилетиями. Но в современную эпоху справедливо будет сказать, что они немного… устарели.

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

Я составил коллекцию из 10 лучших вариантов стилей селекторных коробок ручной работы. Они не выпускаются в виде плагинов, а вместо этого полагаются на шаблоны для настройки JavaScript и CSS. Но все они так же легко настраиваются и даже переделываются для ваших собственных целей.

1. Пользовательское меню выбора

Коллекция начинается с пользовательских стилей меню выбора Уоллеса Эрика.

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

Вы можете выбрать размер и цвет меню или работать со стандартными настройками Уоллеса. Лучше всего то, что он включает в себя настраиваемый дизайн поля загрузки, который, если вы когда-либо пытались изменить стиль, вы знаете, что это сложно.

Отличное место для начала, если вы просто хотите иметь чистое, но свежее меню, которое работает.

2. Простой выбор

Вот еще одно очень простое поле выбора, цель которого более естественно вписаться в любой макет.

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

Он работает, ориентируясь на скрытое поле ввода, которое ведет себя так же, как поле выбора. Таким образом, вы все еще можете извлекать данные из внешнего интерфейса в свои формы, потому что это решение технически не использует фактический элемент <select> .

Если вас беспокоит совместимость, пропустите этот пункт. Но я должен признать, что дизайн великолепен и идеально подходит для настольного трафика.

3. Ненавязчивые выпадающие списки HTML

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

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

Если вы беспокоитесь о совместимости, рассмотрите возможность работы с этим шаблоном.

Большинство изменений носят косметический характер, поэтому они не должны сильно влиять на поведение пользователей.

4. Выбор заполнителя

Фактический дизайн этого меню выбора заполнителя великолепен, но дизайн здесь не единственный фактор.

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

Он полностью совместим и работает с фактическим элементом выбора HTML. Поле опции скрыто по умолчанию всякий раз, когда пользователь выбирает вариант. Таким образом, вы никогда не увидите текст «выберите вариант» в раскрывающемся меню. Действительно креативное решение!

5. Плоский дизайн

Эстетика часто имеет значение в веб-дизайне, и это плоское меню выбора — отличный пример.

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

Вы даже можете взять этот шаблон и расширить его, применив собственные плоские стили к раскрывающейся области. Полностью ваш звонок!

Но в качестве начального шаблона это один из самых простых вариантов для любого интерфейса.

6. Чистый CSS

Я большой поклонник чистого CSS, а не JavaScript, потому что это упрощает весь процесс проектирования. Это непросто, но существует так много решений.

Один из моих любимых — этот фрагмент, в котором представлены не только меню выбора на чистом CSS, но также переключатели и флажки.

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

7. Стилизованные доступные раскрывающиеся списки

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

Что приятно, это меню также поддерживает функцию без JS, поэтому оно будет работать, даже если JavaScript отключен. Это называется изящной деградацией, и это лучший друг веб-разработчика для доступности.

Тем не менее, в этих избранных меню используются градиенты старой школы Web 2.0, которые могут не вписываться в дизайн 2017 года и более поздних версий.

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

8. Меню значков SVG

Меню выбора по умолчанию имеют значок стрелки сбоку и ничего больше. С помощью немного магии SVG вы можете превратить его в любую другую иконку, какую пожелаете.

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

Я никогда раньше не видел ничего подобного, и это показывает, как далеко мы продвинулись, раздвигая границы веб-браузеров.

К сожалению, это не работает с собственным элементом выбора HTML. Это набор элементов списка внутри div , поэтому каждый раз, когда выбирается значение, ему нужно нацеливаться на скрытое поле ввода.

К счастью, этот процесс очень прост, поэтому, если вы хотите, чтобы этот дизайн был на вашем сайте, вам не потребуется много усилий, чтобы заставить его работать.

9. Выберите Box Experiment

Вот экспериментальный дизайн, который действительно привлек мое внимание. Сравнительный демонстрационный экран показывает, насколько это отличается от обычных меню выбора и как это меняет взаимодействие с пользователем.

Когда вы впервые коснетесь / щелкните, чтобы открыть меню, оно будет скользить вниз с полными анимационными эффектами. Но оно не скроется, пока вы снова не щелкнете меню, в отличие от обычных меню выбора, которые скрываются, когда вы щелкаете где-либо еще на странице.

Действительно хороший пример чистого дизайна с простой анимацией. Но если вам не нравится отсутствующая функция «щелкнуть, чтобы скрыть», это может стать нарушением условий сделки.

10. Темный и светлый выбор

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

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

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