Form select

Replace the default select form with your own HTML content, like a button or text.

Usage

To apply this component, just add the .uk-form-select class and the data-uk-form-select attribute to a container element around a span and a <select> element. Basically, this will overlay the default select element with a custom UIkit form.

Example

Markup

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

As a button

Add the .uk-button class to the container element to style it as a button.

Markup

<div class="uk-button uk-form-select" data-uk-form-select>...</div>

As an anchor

You can use any element, like an <a> as a select form. Just add the {target:'a'} option to the data-uk-form-select attribute and use an <a> instead of a <span> element.

Example

Markup


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