更改 md-autocomplete 占位符文本的 css答案

【问题标题】：Change css of placeholder text of md-autocomplete更改 md-autocomplete 占位符文本的 css
【发布时间】：2016-07-21 03:47:33
【问题描述】：

我使用 Angular Material 1.1 版

我想更改 md-autocomplete 组件的占位符文本的样式。但是，我无法选择占位符作为单独的元素来使用它的样式。

您在这里看到一个codepen 来说明问题。

我尝试了以下听写代码，但它们不起作用

md-autocomplete{
  color: red !important;
}
md-autocomplete-wrap{
  color: red !important;
}
input{
  color: red !important;
}

有什么办法吗？

【问题讨论】：

::-webkit-input-placeholder { color: red; }
它可以在所有浏览器中使用吗？它对所有输入字段都有效吗？
浏览参考资料..

标签： javascript html css angularjs angular-material

【解决方案1】：

您可以使用以下选择器为不同的浏览器设置 [占位符] 的样式。

::-webkit-input-placeholder {
   color: blue;
}

:-moz-placeholder { /* Firefox 18- */
   color: blue;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: blue;  
}

:-ms-input-placeholder {  
   color: blue;  
}

CodePen 示例：http://codepen.io/bigbrov/pen/LNzbqp

【讨论】：

【解决方案2】：

要更改元素中的占位符，伪元素placeholder 应该是用户。

在这种情况下：

md-autocomplete input::-webkit-input-placeholder {
    color:red;
}
md-autocomplete input:-moz-placeholder { /* Firefox 18- */
    color:red;
}

md-autocomplete input::-moz-placeholder {  /* Firefox 19+ */
    color:red;
}

md-autocomplete input:-ms-input-placeholder { 
    color:red;
}

How to change

Pseudo elements

感谢@Rayon Dabre：

【讨论】：