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

Question

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

HTML:

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

CSS:

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

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

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

An earlier SO discussion that could also be helpful.

Answer 1

秘诀在于您不需要为 input 设置样式，而是需要为生成的 label.

设置样式

考虑到占位符的标签是在紧跟在 <input> 之后的 <span> 内生成的，您可以将其定位为：

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

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

这可以在this Plunkr.

中看到

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

希望对您有所帮助！ :)

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

How to modify CSS of placeholder attribute in a textarea/input tag?

css

angular-material2

angular