Создаем пользовательские элементы select

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

Какие стили использовать, зависит, конечно, от того, что вы хотите чтобы увидел ваш пользователь. При замене элемента select на пользовательскую структуру очень важно сохранить новый элемент доступным. Добавление лэйбла и особые стили при попадания фокуса - это лишь некоторые из вещей, которые вы должны иметь в виду. Узнайте больше о той или иной форме доступности в HTML: HTML Techniques for Web Content Accessibility Guidelines 1.0 от the W3C.

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

В демо мы используем иконки из следующих наборов значков: Ionicons, Font Awesome, Linecons и Maki.

SVG-флаги, используемые в одном из примеров, из Flag Webicons Set от Sean Herron.

Круглые иконки, используемые в одном из примеров, взяты из Ballicons 2 set от Pixel Buddha.

Итак, давайте взглянем на наш обычный элемент select. Он обычно выглядит следующим образом:

<select class="cs-select cs-skin-rotate">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Мы же преобразуем его в эту структуру:

<div class="cs-select cs-skin-rotate">
    <span class="cs-placeholder">Выберите Ваш вариант</span>
    <div class="cs-options">
        <ul>
            <li data-option data-value="1" class="cs-selected"><span>Вариант 1</span></li>
            <li data-option data-value="2"><span>Вариант 2</span></li>
            <li data-option data-value="3"><span>Вариант 3</span></li>
        </ul>
    </div>
    <select class="cs-select cs-skin-rotate">
        <option value="" disabled selected>Выберите Ваш вариант</option>
        <option value="1">Вариант 1</option>
        <option value="2">Вариант 2</option>
        <option value="3">Вариант 3</option>
    </select>
</div>

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

По желанию, мы можем определить data-link и data-class в опциях элемента select. Опция link позволит фактически открыть гиперссылку при нажатии на элемент списка. Когда пользовательские классы необходимы на элементов списка, то атрибут data-class класс может быть использован.

Доступны следующие опции:

newTab : true,
// открывает ссылки на новом табе (когда data-link используется в настройках)

stickyPlaceholder : true,
// когда открывается элемент select, показывается placeholder по-умолчанию

onChange : function( val ) { return false; }
//функция обратного вызова при изменении значения

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

Основные стили для наших примеров находятся в cs-select.css. Ниже представлен в качестве примера css-код для примера Border:

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
    src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
    url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
    url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
    url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
div.cs-skin-border {
    background: transparent;
    font-size: 2em;
    font-weight: 700;
    max-width: 600px;
}
@media screen and (max-width: 30em) {
    .cs-skin-border { font-size: 1em; }
}
.cs-skin-border > span {
    border: 5px solid #000;
    border-color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
    font-family: 'icomoon';
    content: '\e000';
}
.cs-skin-border ul span::after {
    content: '';
    opacity: 0;
}
.cs-skin-border .cs-selected span::after {
    content: '\e00e';
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1;
    transition: opacity 0.2s;
}
.cs-skin-border.cs-active > span {
    background: #fff;
    border-color: #fff;
    color: #2980b9;
}
.cs-skin-border .cs-options {
    color: #2980b9;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
.cs-skin-border.cs-active .cs-options {
    opacity: 1;
    transition: opacity 0.2s;
}
.cs-skin-border ul span {
    padding: 1em 2em;
    backface-visibility: hidden;
}
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
    background: #f5f3ec;
}

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

Надеемся, они вам понравятся!