--- title: Select layout: documentation doc-tab: form doc-subtab: select breadcrumb: - home - documentation - form - form-select meta: colors: true sizes: true variables: false --- {% capture select_example %}
{% endcapture %} {% capture select_multiple_example %}
{% endcapture %} {% capture colors_example %}
{% endcapture %} {% capture rounded_example %}
{% endcapture %} {% capture sizes_example %}
{% endcapture %} {% capture normal_example %}
{% endcapture %} {% capture hover_example %}
{% endcapture %} {% capture focus_example %}
{% endcapture %} {% capture loading_example %}
{% endcapture %} {% capture disabled_example %}
{% endcapture %} {% capture icons_example %}
{% endcapture %} {% capture has_icons_small_example %}
{% endcapture %} {% capture has_icons_normal_example %}
{% endcapture %} {% capture has_icons_medium_example %}
{% endcapture %} {% capture has_icons_large_example %}
{% endcapture %}

The select class is a simple wrapper around the <select> HTML element, which gives the styling more flexibility and support for icons.

{{ select_example }}
{% highlight html %}{{ select_example }}{% endhighlight %}

Several modifiers are supported which affect:

{% include elements/anchor.html name="Multiple select" %}

You can style a multiple select dropdown, by using the is-multiple modifier, and by using the multiple HTML attribute.

{{ select_multiple_example }}
{% highlight html %}{{ select_multiple_example }}{% endhighlight %}
{% include elements/anchor.html name="Colors" %}
{{ colors_example }}
{% highlight html %}{{ colors_example }}{% endhighlight %}
{% include elements/anchor.html name="Styles" %}

You can create a rounded dropdown by appending the is-rounded modifier:

{{ rounded_example }}
{% highlight html %}{{ rounded_example }}{% endhighlight %}
{% include elements/anchor.html name="Sizes" %}

The select element comes in 4 different sizes:

{{ sizes_example }}
{% highlight html %}{{ sizes_example }}{% endhighlight %}
{% include elements/anchor.html name="States" %}

Bulma styles the different states of the select element. Each state is available as a pseudo-class and a CSS class:

This allows you to obtain the style of a certain state without having to trigger it.

Normal

{{ normal_example }}
{% highlight html %}{{ normal_example }}{% endhighlight %}

Hover

{{ hover_example }}
{% highlight html %}{{ hover_example }}{% endhighlight %}

Focus

{{ focus_example }}
{% highlight html %}{{ focus_example }}{% endhighlight %}

Loading

{{ loading_example }}
{% highlight html %}{{ loading_example }}{% endhighlight %}
{% include elements/anchor.html name="With icons" %}

You can append the modifier on a control:

You also need to add a modifier on the icon:

The size of the select will define the size of the icon container.

{{ icons_example }}
{% highlight html %}{{ icons_example }}{% endhighlight %}

If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.

{{ has_icons_small_example }}
{% highlight html %}{{ has_icons_small_example }}{% endhighlight %}
{{ has_icons_normal_example }}
{% highlight html %}{{ has_icons_normal_example }}{% endhighlight %}
{{ has_icons_medium_example }}
{% highlight html %}{{ has_icons_medium_example }}{% endhighlight %}
{{ has_icons_large_example }}
{% highlight html %}{{ has_icons_large_example }}{% endhighlight %}