better select tag experience (Chrome and Firefox only)

src/sass/components/_forms.scss

@@ -101,13 +101,41 @@ select {
         height: auto;
     }
 
-    option {
+    option[disabled] {
-        padding-right: $input-padding-horizontal;
+        color: $gray-lighter;
-        padding-left: $input-padding-horizontal;
+    }
+}
 
-        &[disabled] {
+/**
-            color: $gray-lighter;
+ * Browser hacks: unfortunately every browser has different capabilities when it
+ * comes to styling <select> and <option> tags.
+ */
+
+
+// Mozilla Firefox
+@-moz-document url-prefix() {
+    select {
+        &[multiple] {
+            padding: 0;
         }
+
+        option {
+            padding: $input-padding-vertical $input-padding-horizontal;
+            border-bottom: 1px dotted $gray-lighter;
+        }
+    }
+}
+
+// Google Chrome and Safari
+@supports (-webkit-appearance: none) {
+    select[multiple] {
+        padding: 0;
+    }
+
+    // For some reason nested selectors will not work
+    select[multiple] option {
+        padding: $input-padding-vertical $input-padding-horizontal;
+        border-bottom: 1px dotted $gray-lighter;
     }
 }