The select
class is a simple wrapper around the <select>
HTML element, which gives the styling more flexibility and support for icons.
Several modifiers are supported which affect:
Multiple select
#
You can style a multiple select dropdown, by using the is-multiple
modifier, and by using the multiple
HTML attribute.
Colors
#
Styles
#
You can create a rounded dropdown by appending the is-rounded
modifier:
Sizes
#
The select
element comes in 4 different sizes:
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
Hover
Focus
Loading
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.
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.