::placeholder

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="first-name">Your phone number:</label><br />

<input
  id="first-name"
  type="tel"
  name="phone"
  minlength="9"
  maxlength="9"
  placeholder="It must be 9 digits" />

只有可以应用于 ::first-line 伪元素的 CSS 属性子集可以在使用了 ::placeholder 选择器的规则中使用。

对比度

占位文本通常采用较浅的颜色处理，以表明它是对输入的建议，而不是任何实际的输入。

重要的是要确保占位文本的颜色与输入的背景之间的对比度足够高，以便视力较差的人能够阅读它，同时还要确保占位文本与输入文本的颜色有足够的差异，以免用户将占位符误认为是输入的数据。

色彩对比度是通过比较占位文本和输入背景的颜色的亮度来确定的。为了满足当前的 Web 内容无障碍指南（WCAG），文本内容需要达到 4.5:1 的对比度，而较大的文本（如标题）需要达到 3:1 的对比度。大文本定义为 18.66px 及以上的粗体文本，或 24px 及以上的文本。

• WebAIM：色彩对比度检查器
• MDN：了解 WCAG，指南 1.4 的解释
• 了解成功标准 1.4.3 | W3C：了解 WCAG 2.0

可用性

具有足够色彩对比度的占位文本可能会被理解为输入的内容。占位文本在用户向 <input> 元素输入内容后也会消失。这两种情况都可能影响表单的成功填写，尤其是对于存在认知障碍的人。

另一种方法是在输入框外部的视觉接近位置包含占位信息，然后使用 aria-describedby 以编程的方式将 <input> 与其提示关联起来。

通过这种方式，即使在输入框中输入了信息，提示内容也是可用的，而且在加载页面时，输入框看起来是没有预先存在的输入内容的。大多数屏幕阅读技术会在输入的标签文本被宣告后使用 aria-describedby 读取提示内容，并且使用屏幕阅读器的人可以在确定额外信息并不必要时将其静音。

<label for="user-email">你的电子邮件地址</label>
<span id="user-email-hint" class="input-hint">示例：jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

• 表单字段中的占位符是有害的——尼尔森诺曼集团

在 Windows 的高对比度模式下渲染时，占位文本将以与用户输入的文本内容相同的样式显示。这将使一些人难以确定哪些内容是输入的，哪些内容是占位文本。

占位符不能替代 <label> 元素。如果没有使用 for 和 id 属性的组合将输入与标签以编程的方式进行关联，辅助技术（如屏幕阅读器）将无法解析 <input> 元素。

• 表单字段中的占位符是有害的——尼尔森诺曼集团

该示例展示了可以对占位文本的样式进行的一些调整。

HTML

<input placeholder="在此输入" />

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

结果

一些浏览器（例如 Firefox）将占位文本的 opacity 默认设置为小于 100%。如果你想要完全不透明的占位文本，可以将 opacity 设置为 1。

HTML

<input placeholder="默认不透明度" />
<input placeholder="完全不透明" class="force-opaque" />

CSS

::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

结果

• :placeholder-shown 伪类用于设置具有激活的占位符的元素的样式。
• 相关的 HTML 元素：<input>、<textarea>
• HTML 表单