fix(checkbox,radio): remove webkit tap highlights (#11349)

Removes the overlays that get added by mobile Webkit browsers when tapping on checkboxes and radio buttons. The overlays look weird, especially when combined with our ripples.
angular · May 22, 2018 · 4b2cc1a · 4b2cc1a
1 parent 64a70ad
commit 4b2cc1a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
@@ -187,6 +187,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
               mat-elevation-transition-property-value();
 
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mat-checkbox-layout {

diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
@@ -9,6 +9,7 @@ $mat-radio-ripple-radius: 25px;
 // Top-level host container.
 .mat-radio-button {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 }
 
 // Inner label container, wrapping entire element.