Form: style select

app/assets/images/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 808l-742 741q-19 19-45 19t-45-19L109 808q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/></svg>

app/assets/stylesheets/new_design/forms.scss

@@ -58,6 +58,29 @@
     max-width: 180px;
   }
 
+  select {
+    // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: image-url("icons/chevron-down.svg") no-repeat;
+    background-size: 14px;
+    background-position: right 10px center;
+    padding-right: 3 * $default-spacer;
+
+    // CAUTION: IE hackery ahead
+    &::-ms-expand {
+      display: none; // remove default arrow in IE 10 and 11 */
+     }
+
+    // target Internet Explorer 9 to undo the custom arrow */
+    @media screen and (min-width:0\0) {
+      select {
+        background: none\9;
+      }
+    }
+  }
+
   .datetime {
     input[type=date] {
       display: inline-block;