---
title: Select
layout: docs
theme: library
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 rounded_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 docs/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 docs/elements/anchor.html name="Colors" %}
{% for color in site.data.colors.justColors %}
{% capture foobar %}
{% endcapture %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include docs/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 docs/elements/anchor.html name="Sizes" %}
The select element comes in 4 different sizes:
{% for size in site.data.sizes %}
{% capture foobar %}
{% endcapture %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include docs/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:
:hover and is-hovered:focus and is-focused:active and is-active
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 docs/elements/anchor.html name="With icons" %}
You can append the modifier on a control:
You also need to add a modifier on the icon:
icon is-left since has-icons-left is used
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 %}