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

Posted 2023-03-05

【中文标题】更改 md-autocomplete 占位符文本的 css

【英文标题】：Change css of placeholder text of md-autocomplete

【发布时间】：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;

它可以在所有浏览器中使用吗？它对所有输入字段都有效吗？

浏览参考资料..

【参考方案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：