diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index a99f81ec..a42326f4 100644
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -43,12 +43,12 @@ doc-subtab: general
-
+
-
+
diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html
new file mode 100644
index 00000000..21edefa1
--- /dev/null
+++ b/docs/documentation/form/select.html
@@ -0,0 +1,453 @@
+---
+layout: documentation
+doc-tab: form
+doc-subtab: select
+---
+
+{% capture select_example %}
+
+
+
+{% endcapture %}
+
+{% capture select_multiple_example %}
+
+
+
+{% endcapture %}
+
+{% capture colors_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 %}
+
+{% include subnav-form.html %}
+
+
+
+
Select
+
+ The browser built-in select dropdown, styled accordingly
+
+
+
+
+
+
The following modifiers are supported:
+
+
+
+
+
+ {{select_example}}
+
+
+ {% highlight html %}{{select_example}}{% endhighlight %}
+
+
+
+ {% if site.vernum >= 42 %}
+
+
+
Multiple select
+
+
+
+
+
+ New!
+ 0.4.4
+
+
+ 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 %}
+
+
+ {% endif %}
+
+
+
+
Colors
+
+
+
+ {{colors_example}}
+
+
+ {% highlight html %}{{colors_example}}{% endhighlight %}
+
+
+
+
+
Sizes
+
+
+ {{sizes_example}}
+
+
+ {% highlight html %}{{sizes_example}}{% endhighlight %}
+
+
+
+
+
+
States
+
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 %}
+
+
+
+
+
+
+
+
+
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 %}
+
+
+
+
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 4f074435..aa2dcb68 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -97,16 +97,17 @@ $input-radius: $radius !default
.select
display: inline-block
- height: 2.25em
max-width: 100%
position: relative
vertical-align: top
- &:after
- +arrow($input-arrow)
- margin-top: -0.375em
- right: 1.125em
- top: 50%
- z-index: 4
+ &:not(.is-multiple)
+ height: 2.25em
+ &::after
+ +arrow($input-arrow)
+ margin-top: -0.375em
+ right: 1.125em
+ top: 50%
+ z-index: 4
select
+input
cursor: pointer
@@ -114,16 +115,27 @@ $input-radius: $radius !default
font-size: 1em
max-width: 100%
outline: none
- padding-right: 2.5em
&:hover
border-color: $input-hover-border
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ border-color: $input-focus-border
&::-ms-expand
display: none
&[disabled]:hover
border-color: $input-disabled-border
+ &:not([multiple])
+ padding-right: 2.5em
+ &[multiple]
+ height: unset
+ padding: 0
+ option
+ padding: 0.5em 1em
// States
&:hover
- &:after
+ &::after
border-color: $input-hover
// Colors
@each $name, $pair in $colors
@@ -139,14 +151,14 @@ $input-radius: $radius !default
+control-large
// Modifiers
&.is-disabled
- &:after
+ &::after
border-color: $input-disabled
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
- &:after
+ &::after
+loader
margin-top: 0
position: absolute
@@ -332,7 +344,7 @@ $input-radius: $radius !default
&.has-icons-left,
&.has-icons-right
.input,
- .select select
+ .select
&:focus
& ~ .icon
color: $input-icon-active
@@ -363,7 +375,7 @@ $input-radius: $radius !default
.icon.is-right
right: 0
&.is-loading
- &:after
+ &::after
+loader
position: absolute !important
right: 0.625em