Fix #702

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2969891760fdd2267a1d7e42b55193ac51842108..9655b75ce5d86190f8871c909ed691343173c002 100644 (file)
--- 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 c4cf1bf20950f49bc8eaa712b01f08639d13666b..c0db634d735bca76341d65e7fae697984ee843cc 100644 (file)
--- 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 442633fc589bd0489b2be8c89b0ec2c6e959bf1d..2d0ad159bc72fbaf764b0bb66b5a59cea1c091b8 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -476,11 +476,44 @@ doc-subtab: form
       </div>
     </div>
 
+{% capture select_icons_example %}
+<div class="field">
+  <p class="control has-icons-left">
+    <span class="select">
+      <select>
+        <option selected>Country</option>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+    <span class="icon is-small is-left">
+      <i class="fa fa-globe"></i>
+    </span>
+  </p>
+</div>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-half">
+
     <div class="content">
       <p>
         <span class="tag is-success">New!</span>
         <span class="tag is-info">0.4.2</span>
       </p>
+      <p>
+        You can now append icons to <strong>select dropdowns</strong> as well.
+      </p>
+    </div>
+{{select_icons_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{select_icons_example}}
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="content">
       <p>
         If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
       </p>

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 19236eee6989635a0fb664f46c0bb13fa46fde46..ccc60daeb46067a4eb8bd50b5bfa37c694c1f0fe 100644 (file)
--- 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