Separate styling of <select>

This will remove the arrow symbol from <select> elements using either the 'size'
or the 'multiple' attribute, since these are expanded and using a scrollbar.

Author: alexandersandberg

forms.css

@@ -22,11 +22,19 @@ textarea {
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
+  background: no-repeat right center / 1em;
   border-radius: 0;
   padding-right: 1em;
 }
 
+/**
+ * Change the inconsistent appearance in all browsers (opinionated).
+ */
+
+select:not([multiple]):not([size]) {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+}
+
 /**
  * Change the inconsistent appearance in IE (opinionated).
  */