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;