fix(styling): Removes tap highlight color visible on mobile Safari fo…

…r checkbox, radio, iconbutton, and textfield. PiperOrigin-RevId: 499279539
material-components · Jan 3, 2023 · eec25b3 · eec25b3
1 parent 2f112fa
commit eec25b3
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss
@@ -47,6 +47,7 @@ $_checkmark-bottom-left: 7px, -14px;
     position: relative;
     vertical-align: top; // Fix extra space when placed inside display: block
     width: 48px;
+    -webkit-tap-highlight-color: transparent;
   }
 
   input {

diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss
@@ -20,6 +20,7 @@
   :host {
     display: inline-flex;
     outline: none;
+    -webkit-tap-highlight-color: transparent;
   }
 
   :host([disabled]) {

diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -12,6 +12,10 @@
 @use './radio-theme';
 
 @mixin static-styles() {
+  :host {
+    -webkit-tap-highlight-color: transparent;
+  }
+
   .md3-radio {
     display: inline-flex;
     position: relative;

diff --git a/textfield/lib/_shared.scss b/textfield/lib/_shared.scss
@@ -17,6 +17,7 @@
   :host {
     display: inline-flex;
     outline: none;
+    -webkit-tap-highlight-color: transparent;
   }
 
   .md3-text-field {