Hide Firefox's focus outline on range inputs

Firefox ignores "outline: none;" on ranges, so a dotted rectangle is shown around focused range sliders. This change hides that rectangle to bring the appearance in line with other browsers.
ionic-team · Nov 27, 2015 · dff98d8 · dff98d8
1 parent 89c47c2
commit dff98d8
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/scss/_range.scss b/scss/_range.scss
@@ -20,6 +20,11 @@
   background-size: 99% $range-track-height;
   background-repeat: no-repeat;
   -webkit-appearance: none;
+
+  &::-moz-focus-outer {
+    /* hide the focus outline in Firefox */
+    border: 0;  
+  }
 
   &::-webkit-slider-thumb {
     position: relative;
@@ -150,4 +155,4 @@
   .range input{
     height:auto;
   }
-}
+}