Firefox select styling fixes

Author: rowanhogan

source/sass/interactive/_selects.scss

@@ -12,6 +12,10 @@ select {
   font-family: $font-family-input;
   font-weight: $font-weight-normal;
 
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
   color: $select-foreground-color;
   background-color: $select-background-color;
   border-color: $select-border-color;
@@ -39,3 +43,15 @@ select {
 
   &[multiple] { background-image: none; }
 }
+
+
+// Firefox fixes/hacks
+
+@-moz-document url-prefix() {
+  select {
+    -moz-appearance: none;
+    text-indent: 0.01px;
+    text-overflow: '';
+    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path d=\"M8 12l8 8 8-8z\" /></svg>");
+  }
+}