使用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 目前需要一系列的供应商前缀。