占位符文本将自动继承常规输入文本的字体系列和字体大小,但您可能需要更改占位符文本颜色。您可以使用::占位符伪元素来实现这一点。
在我们的示例中,让我们为占位符文本定义一种自定义颜色,并覆盖继承的字体大小以具有较小的占位符文本。以下是我们的基本输入样式:
1input[type="text"] {
2 font-family: monospace;
3 font-size: 20px;
4 color: peru;
5}
以下是我们的占位符文本的样式:
1::-webkit-input-placeholder {
2 color: peachpuff;
3 font-size: 13px;
4}
5::-moz-placeholder {
6 color: peachpuff;
7 font-size: 13px;
8}
9:-ms-input-placeholder {
10 color: peachpuff;
11 font-size: 13px;
12}
13::placeholder {
14 color: peachpuff;
15 font-size: 13px;
16}
不幸的是,您可以看到::PLACEHOLDER目前需要大量的供应商前缀。