better select tag experience (Chrome and Firefox only)

src/sass/components/_forms.scss

@@ -101,16 +101,44 @@ select {
         height: auto;
     }
 
-    option {
-        padding-right: $input-padding-horizontal;
-        padding-left: $input-padding-horizontal;
+    option[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;
+        }
 
-        &[disabled] {
-            color: $gray-lighter;
+        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;
+    }
+}
+
 select:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 #000;