From adbe8bb19bbd384bda68af76f6560e840db239fc Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 15 May 2018 22:10:01 +0200
Subject: [PATCH] fix(checkbox,radio): remove webkit tap highlights

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.
---
 src/lib/checkbox/checkbox.scss | 1 +
 src/lib/radio/radio.scss       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index d0ab2b132ff1..ac3d8c714233 100644
--- 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
index 7baa894e3469..c613cc8684e4 100644
--- 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.