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

Question

我使用 Angular Material 版本 1.1

我想更改 md-autocomplete 组件占位符文本的样式。但是，我无法 select 将占位符作为单独的元素来处理其样式。

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

我尝试了以下听写代码，但没有用

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

有什么办法吗？

Answer 1

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

::-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

Answer 2

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

在这种情况下：

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：

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

Change css of placeholder text of md-autocomplete

html

javascript

css

angularjs

angular-material