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

Author: devversion

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;

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;