Html 输入占位符文本的多种样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18521929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple styles for input placeholder text
提问by d512
I want to style my input box placeholder text, which I am doing like this:
我想设置我的输入框占位符文本的样式，我正在这样做：
::-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; }
But I have scenarios where different placeholders require different styles like this:
但是我有一些场景，不同的占位符需要不同的样式，如下所示：
Is this possible to do? I can't seem to successfully combined the css above with classes or and other type of element selector. All the tutorials I've found stop at just setting the placeholder text once and don't get into having multiple placeholder stylings. Is that a global setting?
这是可能的吗？我似乎无法成功地将上面的 css 与类或其他类型的元素选择器结合起来。我发现的所有教程都只设置一次占位符文本，并没有涉及多个占位符样式。这是全局设置吗？
回答by SlightlyCuban
You have to combine the class with the pseudo element, and then you can apply a class to the input elements:
您必须将类与伪元素结合起来，然后才能将类应用于输入元素：
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>Note: I added the inputhere for clarity and correctness.
注意：input为了清晰和正确，我在此处添加了。
Remember, the pseudo selectors aren't real elements on the page, but attached to some other element. Combine them with some other element selector to match something more specific.
请记住，伪选择器不是页面上的真实元素，而是附加到其他一些元素上。将它们与一些其他元素选择器结合起来以匹配更具体的内容。
回答by Mark
Use classes on your inputs should work. Have you tried the below:
在您的输入上使用类应该可以工作。您是否尝试过以下操作：
/* WebKit browsers */
input.myClassNameOne::-webkit-input-placeholder {
font-size: 16pt; color: #555;
}
/* Mozilla Firefox 4 to 18 */
input.myClassNameOne:-moz-placeholder {
font-size: 16pt; color: #555;
}
/* Mozilla Firefox 19+ */
input.myClassNameOne::-moz-placeholder {
font-size: 16pt; color: #555;
}
/* Internet Explorer 10+ */
input.myClassNameOne:-ms-input-placeholder {
font-size: 16pt; color: #555;
}<input type="text" class="myClassNameOne" placeholder="test input" />
<input type="text" class="myClassNameTwo" placeholder="test input" />JSFiddle: http://jsfiddle.net/markwylde/fFLL7/1/
JSFiddle：http: //jsfiddle.net/markwylde/fFLL7/1/
回答by Pevara
Though the other answers are correct, I would like to note that you do not need to apply the class directly to the input. You could also apply it to some parent wrapper, and slightly modify the suggested CSS to achieve the same result, which is perhaps easier as you may need to do less modifying on your HTML.
尽管其他答案是正确的，但我想指出您不需要将类直接应用于输入。您还可以将其应用于某些父包装器，并稍微修改建议的 CSS 以实现相同的结果，这可能更容易，因为您可能需要对 HTML 进行较少的修改。
An example (also see fiddle):
一个例子（另见fiddle）：
.default ::-webkit-input-placeholder { font-size: 16pt; color: #555; }
.default ::-moz-placeholder { font-size: 16pt; color: #555; }
.default :-ms-input-placeholder { font-size: 16pt; color: #555; }
.default input:-moz-placeholder { font-size: 16pt; color: #555; }
.other ::-webkit-input-placeholder { font-size: 12pt; color: red; }
.other ::-moz-placeholder { font-size: 12pt; color: red; }
.other :-ms-input-placeholder { font-size: 12pt; color: red; }
.other input:-moz-placeholder { font-size: 12pt; color: red; }<div class='default'>
<input placeholder='default'/>
<input placeholder='default'/>
<input placeholder='default'/>
</div>
<div class='other'>
<input placeholder='other'/>
<input placeholder='other'/>
<input placeholder='other'/>
</div>