Fix #702

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
 

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;
 }
 

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>

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