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

【问题标题】：Multiple styles for input placeholder text输入占位符文本的多种样式
【发布时间】：2013-09-02 12:50:46
【问题描述】：

我想设置输入框占位符文本的样式，我正在这样做：

::-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 与类或其他类型的元素选择器结合起来。我发现的所有教程都只设置一次占位符文本，而不是使用多个占位符样式。这是全局设置吗？

【问题讨论】：

标签： html css

【解决方案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

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

【讨论】：

如果你使用 Bootstrap <section id="USA"> 你也可以定位 id section#USA input:

【解决方案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/

【讨论】：

【解决方案3】：

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

一个例子（另见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>

【讨论】：

-webkit, -moz, -ms, 有什么区别？
@Flash 这些是浏览器特定的前缀。它们通常在功能尚未标准化但已由浏览器实现时使用。现在我使用 prefixfree，它会为你做所有的前缀（即在一个 gulp 任务中）leaverou.github.io/prefixfree