::placeholder

在使用 ::placeholder 作为选择器的规则中，只能使用适用于 ::first-line 伪元素的 CSS 属性子集。

对比度

占位符文本通常使用较浅的颜色处理，以表明它只是一个建议，用于指示哪些输入有效，而不是实际输入。

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

颜色对比度是通过比较占位符文本和输入背景颜色值的亮度来确定的。为了满足当前的 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">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: [email protected]</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

• 表单字段中的占位符有害 - Nielsen Norman Group

在 Windows 高对比度模式 下渲染时，占位符文本将与用户输入的文本内容具有相同的样式。这将使一些用户难以区分哪些内容是输入的，哪些内容是占位符文本。

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

• 表单字段中的占位符有害 - Nielsen Norman Group

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

HTML

<input placeholder="Type here" />

CSS

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

结果

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

HTML

<input placeholder="Default opacity" />
<input placeholder="Full opacity" class="force-opaque" />

CSS

::placeholder {
  color: green;
}

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

结果

• The :placeholder-shown 伪类样式化具有活动占位符的元素。
• 相关 HTML 元素：<input>，<textarea>
• HTML 表单