Hide Firefox focus ring

See this StackOverflow answer: https://stackoverflow.com/a/18853002/4633828

This isn't a perfect fix - we have to set `color` explicitly, rather
than use `inherit`, because we want the text color to be the same when
the select element is focused. That means both `color` and
`text-shadow`'s color have to be explicitly set to the same thing
(otherwise they might not match). Yay, hacks!

src/components/forms/select.scss

@@ -12,6 +12,7 @@
         border: 1px solid $active-gray;
         border-radius: 5px;
         background: $ui-light-gray url("../../../static/svgs/forms/carot.svg") no-repeat right center;
+        color: $type-gray;
         padding-right: 4rem;
         width: 100%;
         height: 3rem;
@@ -34,6 +35,11 @@
             border: 1px solid $ui-blue;
         }
 
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 $type-gray;
+        }
+
         &:focus,
         &:hover {
             background: $ui-light-gray url("../../../static/svgs/forms/carot-hover.svg") no-repeat right center;