Изменение Select средствами css довольно скудное и не позволяет в полной мере настроить необходимый внешний вид, как раскрывающегося блока выбора, так и списка опций.

Для решения данных задач существуют различные JS библиотеки, среди которых: select2, selectize, nice select и прочие. В текущей статье, в качестве примера, разберем подключение библиотеки Selectize.js.

В первую очередь нам необходимо подключить файл стилей и сам скрипт.

Для этого в блок кода для head вставляем следующую строку:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/css/selectize.min.css" />

Далее, в блок перед закрывающим тегом body вставляем:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/js/selectize.min.js"></script>

Замечание

Актуальные версии файлов для подключения вы можете найти в официальной документации.

Следующим шагом будет инициализация работы нашего скрипта. Для минимального запуска необходимо все в тот же блок, перед закрывающим тегом body, после подключенного ранее скрипта, добавить код:

<script>
  $(function () {
    $("select").selectize();
  });
</script>

В текущем примере, мы используем тег select, как селектор, за который скрипт будет цепляться при работе. Т.е. в этом случае, он будет работать со всеми элементами select на странице. Если же мы хотим настроить скрипт для какого-то определенного тега, то нам необходимо в данной строке $("select").selectize(options); заменить select на наш класс (.class_element) или id элемента (#id_element).

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

Внимание

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

Итак, вот такой вид имел наш select до подключения скрипта:

А вот так он выглядит теперь:

На первый взгляд, может показаться «Шеф, всё пропало, всё пропало!». Но нет, это только начало и сейчас мы будем настраивать внешний вид)

Первым делом, нам необходимо сбросить все предустановленные параметры для нашего старого селекта.

Для этого в панели стилей задаем внутренние отступы блока равные нулю (по умолчанию они таковы и есть, но при выгрузке webflow их добавляет, поверьте):

Далее ставим прозрачный фон и убираем обводку:

Проверим как теперь выглядит наш элемент:

Отлично, стандартный select уже не мешает, но и для полного счастья новому еще чего-то не хватает.

За фон в списке опций нового селета отвечает класс .selectize-dropdown-content. Создадим блок и укажем ему данный класс, после чего в качестве фонового цвета выберем тот, который нам необходим:

Либо, что будет более удобным, пропишем данный свойства в качестве css стилей самостоятельно.

<style>
    .selectize-dropdown-content {
        background: #cfcfcf;
    }
</style>

И далее вставим их в код для head:

Выгрузим макет и опять посмотрим, что получилось:

Далее настроим вид активной опции. За нее будут отвечать классы .selectize-dropdown .active. Действуем той же схеме:

.selectize-dropdown .active {
    background: #a6a8bc;
    color: #fff;
}

Тут, для примера и понимания, добавил дополнительно изменение цвета текста.

Выгружаем. Проверяем результат:

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

Другим вариантом настройки внешнего вида текущей библиотеки, является использование метки selector, по работе с которой записана отдельная видео инструкция.

Отвлечемся от стилизации селекта и вспомним что у нашего скрипта имеется возможность использовать дополнительные настройки.

Сейчас мы попробуем дать пользователю возможность добавлять свое значение в наш селект прям из своего браузера. Для этого необходимо добавить параметр create:

$(function () {
    $("select").selectize({
        create: true,
    });
});

И вот что мы получим:

На самом деле, у библиотеки довольно много настроек и все их рассматривать нет особого смысла, т.к. они описаны в документации.

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

Все остальное библиотека сделаем сама:

Вот так, в целом легко и просто, можно преобразовать скучные и однотипные select в живые и отзывчивые элементы.