New! 0.4.2
++ You can now append icons to select dropdowns as well. +
+diff --git a/CHANGELOG.md b/CHANGELOG.md index 29698917..9655b75c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * Fix #728 selected row on striped table * Fix #747 remove flex-shrink for is-expanded +* Fix #702 add icons support for select dropdown ## 0.4.1 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index c4cf1bf2..c0db634d 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -2458,19 +2458,27 @@ input[type="submit"].button { padding-right: 2.25em; } -.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon { +.control.has-icons-left .input:focus ~ .icon, +.control.has-icons-left .select select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, +.control.has-icons-right .select select:focus ~ .icon { color: #7a7a7a; } -.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon { +.control.has-icons-left .input.is-small ~ .icon, +.control.has-icons-left .select select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, +.control.has-icons-right .select select.is-small ~ .icon { font-size: 0.75rem; } -.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon { +.control.has-icons-left .input.is-medium ~ .icon, +.control.has-icons-left .select select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, +.control.has-icons-right .select select.is-medium ~ .icon { font-size: 1.25rem; } -.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon { +.control.has-icons-left .input.is-large ~ .icon, +.control.has-icons-left .select select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, +.control.has-icons-right .select select.is-large ~ .icon { font-size: 1.5rem; } @@ -2484,7 +2492,8 @@ input[type="submit"].button { z-index: 4; } -.control.has-icons-left .input { +.control.has-icons-left .input, +.control.has-icons-left .select select { padding-left: 2.25em; } @@ -2492,7 +2501,8 @@ input[type="submit"].button { left: 0; } -.control.has-icons-right .input { +.control.has-icons-right .input, +.control.has-icons-right .select select { padding-right: 2.25em; } diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 442633fc..2d0ad159 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -476,11 +476,44 @@ doc-subtab: form +{% capture select_icons_example %} +
New! 0.4.2
++ You can now append icons to select dropdowns as well. +
+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.
diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 19236eee..ccc60dae 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -321,7 +321,8 @@ $input-radius: $radius !default padding-right: 2.25em &.has-icons-left, &.has-icons-right - .input + .input, + .select select &:focus & ~ .icon color: $input-icon-active @@ -340,12 +341,14 @@ $input-radius: $radius !default width: 2.25em z-index: 4 &.has-icons-left - .input + .input, + .select select padding-left: 2.25em .icon.is-left left: 0 &.has-icons-right - .input + .input, + .select select padding-right: 2.25em .icon.is-right right: 0