使用 CSS 为占位符文本设计样式

占位符文本将自动继承常规输入文本的字体系列和字体大小,但您可能需要更改占位符文本颜色。您可以使用::占位符伪元素来实现这一点。

在我们的示例中,让我们为占位符文本定义一种自定义颜色,并覆盖继承的字体大小以具有较小的占位符文本。以下是我们的基本输入样式:

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目前需要大量的供应商前缀。

Published At
Categories with 技术
Tagged with
comments powered by Disqus