From cc5dfb87b0e02a0fb33c2e34d43d05216d91acd7 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 11 Jul 2018 17:08:26 +0200 Subject: [PATCH] fix(form-field): placeholder not hiding if `-webkit-text-fill-color` is used (#12076) If developers use `-webkit-text-fill-color` to change the color of the placeholder and label, the actual "native" placeholder won't be invisible because `-webkit-text-fill-color` overwrites `color: transparent`. Fixes #12074 --- src/lib/input/input.scss | 5 +++++ src/lib/select/select.scss | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss index 7ee4bba6362..52fafe8d502 100644 --- a/src/lib/input/input.scss +++ b/src/lib/input/input.scss @@ -75,6 +75,11 @@ // input color in IE, if the consumer overrides it with a higher specificity. color: transparent !important; + // Overwrite browser specific CSS properties that can overwrite the `color` property. + // Some developers seem to use this approach to easily overwrite the placeholder and + // label color. See: https://github.com/angular/material2/issues/12074 + -webkit-text-fill-color: transparent; + // Remove the transition to prevent the placeholder // from overlapping when the label comes back down. transition: none; diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 10bc4734cd1..620cd2b929f 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -112,6 +112,10 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a .mat-form-field-hide-placeholder & { color: transparent; + // Overwrite browser specific CSS properties that can overwrite the `color` property. + // Some developers seem to use this approach to easily overwrite the placeholder / label color. + -webkit-text-fill-color: transparent; + // Remove the transition to prevent the placeholder // from overlapping when the label comes back down. transition: none;