html - 输入占位符文本的多种样式

Question

我想设置我的输入框占位符文本的样式，我这样做是这样的:

::-webkit-input-placeholder { font-size: 16pt; color: #555; }
::-moz-placeholder { font-size: 16pt; color: #555; }
:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

但我有一些场景，不同的占位符需要不同的样式，如下所示:

这可能吗？我似乎无法成功地将上面的 css 与类或其他类型的元素选择器结合起来。我发现的所有教程都止步于只设置一次占位符文本，而没有涉及多个占位符样式。这是全局设置吗？

Answer 1

您必须将类与伪元素结合起来，然后才能将类应用于输入元素:

input::-webkit-input-placeholder { font-size: 16pt; color: #555; }
input::-moz-placeholder { font-size: 16pt; color: #555; }
input:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

input.other::-webkit-input-placeholder { font-size: 12pt; color: red; }
input.other::-moz-placeholder { font-size: 12pt; color: red; }
input.other:-ms-input-placeholder { font-size: 12pt; color: red; }
input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input>
<input type="text" class="other" placeholder="Hello"></input>

注意:为了清晰和正确，我在此处添加了input。

Fiddle

请记住，伪选择器不是页面上的真实元素，而是附加到其他元素。将它们与其他一些元素选择器组合以匹配更具体的内容。