Question

我使用Angular Material版本1.1

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

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

我尝试了以下口述代码，但它们无效

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

有什么办法吗？

Answer 1

要更改元素中的占位符，伪元素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：

Answer 2

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

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

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

2 个答案: