The select class is a simple wrapper around the <select> HTML element, which gives
the styling more flexibility and support for icons.
Sponsor
Select
The browser built-in select dropdown, styled accordingly
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Multiple select #
You can style a multiple select dropdown, by using the is-multiple modifier, and
by using the multiple HTML attribute.
<div class="select is-multiple">
<select multiple size="8">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>Colors #
Example
HTML
<div class="select is-link">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-primary">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-info">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-success">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-warning">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-danger">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Styles #
You can create a rounded dropdown by appending the is-rounded modifier:
<div class="select is-rounded">
<select>
<option>Rounded dropdown</option>
<option>With options</option>
</select>
</div>Sizes #
The select element comes in 4 different sizes:
Example
HTML
<div class="select is-small">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-normal">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-medium">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Example
HTML
<div class="select is-large">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>States #
Bulma styles the different states of the select element. Each state is available as a
pseudo-class and a CSS class:
:hoverandis-hovered:focusandis-focused:activeandis-active
This allows you to obtain the style of a certain state without having to trigger it.
Normal
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Hover
<div class="select">
<select class="is-hovered">
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Focus
<div class="select">
<select class="is-focused">
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>Loading
<div class="select is-loading">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>With icons #
You can append the modifier on a control:
-
has-icons-left
You also need to add a modifier on the icon:
icon is-leftsincehas-icons-leftis used
The size of the select will define the size of the icon container.
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-globe"></i>
</div>
</div>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.
<div class="control has-icons-left">
<div class="select is-small">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-small is-left">
<i class="fas fa-globe"></i>
</span>
</div><div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-left">
<i class="fas fa-globe"></i>
</span>
</div><div class="control has-icons-left">
<div class="select is-medium">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-medium is-left">
<i class="fas fa-globe"></i>
</span>
</div><div class="control has-icons-left">
<div class="select is-large">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<span class="icon is-large is-left">
<i class="fas fa-globe"></i>
</span>
</div>
