如何在textarea / input标签中修改占位符属性的CSS？

Question

我试图修改文本区域元素的占位符属性中文本的字体大小。我可以使用vanilla CSS来做到这一点，但当我尝试在我的应用程序中模仿这个想法时 - 使用Angular Material 2的Angular 2应用程序 - 我无法获得所需的行为。在vanilla HTML / CSS中，我可以简单地执行以下操作：

HTML：

<textarea id="foo" placeholder="goodbye enemy!"></textarea>

CSS ：

#foo::-webkit-input-placeholder{font-size: 100%;}

我只是修改百分比值来修改占位符文本的大小。但是，当我尝试使用Angular Material尝试相同的方法时，我无法修改字体大小。

输入指令中的Angular Material 2 doc位于：Docs on the Angular 2 Material Input Directive。我已经使用了与之关联的plnkr，但无法使用给定的方法修改占位符文本。有谁知道为什么？文档声明<md-input-container>只是原生输入/ textarea标签的包装器，因此我不确定它是否在后台覆盖某种行为。任何帮助，将不胜感激。

An earlier SO discussion that could also be helpful.

Answer 1

秘诀在于您不需要设置输入的样式，而是生成的标签。

考虑到占位符的标签是在紧跟<span>后的<input>内生成的，您可以使用以下内容进行定位：

input + span > label {
  color: red !important;
}

+表示您只想定位下一个匹配元素，而>表示直接子元素。

可以看到 this Plunkr 。

请注意，上面的选择器需要!important声明，因为它比Angular示例CSS中的选择器低specificity 。理想情况下，您需要提供更高的特异性，而不是使用!important。

希望这有帮助！ ：）