Form select

Замените <select> ("форма выбора" по умолчанию - элемент интерфейса в виде раскрывающегося списка) своим собственным содержимым HTML, таким как кнопка или текст.

Применение

Чтобы применить этот компонент, просто добавьте класс .uk-form-select и атрибут data-uk-form-select к элементу контейнера вокруг span и элемента <select>. По сути, это перекроет (наложит) элемент выбора *select по умолчанию на пользовательскую форму UIkit.

Пример

Разметка

<div class="uk-form-select" data-uk-form-select>
    <span></span>
    <select>
        <option value="">...</option>
        <option value="">...</option>
    </select>
</div>

В виде кнопки

Добавьте класс .uk-button к элементу контейнера, чтобы оформить его как кнопку.

Разметка

<div class="uk-button uk-form-select" data-uk-form-select>
    <span></span>
    <i class="uk-icon-caret-down"></i>
    <select>
        <option value="">...</option>
        <option value="">...</option>
    </select>
</div>

Вы можете использовать такой элемент, как <a> в качестве select form. Просто добавьте опцию {target:'a'} к атрибуту data-uk-form-select и используйте <a> вместо элемента <span>.

Пример

Разметка

<div class="uk-form-select" data-uk-form-select="{target:'a'}">
    <a></a>
    <select>...</select>
</div>

Добавляем компонент к проекту

<link rel="stylesheet" href="/../css/components/form-select.min.css">
<script src="/../js/components/form-select.min.js"></script>