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

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为了清晰和正确,我在这里添加了.

小提琴

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

Answer 2

使用输入中的类应该有效.你试过以下的事情:

/* 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/

Answer 3

虽然其他答案都是正确的,但我想请注意,您不需要将该类直接应用于输入.您也可以将它应用于某个父包装器,并稍微修改建议的CSS以获得相同的结果,这可能更容易,因为您可能需要对HTML进行较少的修改.

一个例子(也见小提琴):

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