使用CSS设置占位符文本样式

占位符文本将自动继承常规输入文本的字体系列和字体大小，但您可能会遇到需要更改占位符文本颜色的情况。 您可以使用 ::placeholder 伪元素来完成此操作。

在我们的示例中，让我们为占位符文本定义自定义颜色，并覆盖继承的字体大小以具有更小的占位符文本。 这是我们的基本输入样式：

input[type="text"] {
  font-family: monospace;
  font-size: 20px;
  color: peru;
}

这是我们占位符文本的样式：

::-webkit-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::-moz-placeholder {
  color: peachpuff;
  font-size: 13px;
}
:-ms-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::placeholder {
  color: peachpuff;
  font-size: 13px;
}

不幸的是，您可以看到 ::placeholder 目前需要大量供应商前缀。