CSS Placeholder Color

在 CSS 伪元素中，占位符选择器通过改变文本颜色和样式来定制占位符文本。

::first-line 伪元素是 ::placeholder 选择器规则中唯一相关的 CSS 属性子集。占位符文本在大多数浏览器中默认是透明或浅灰色的。

语法

在 CSS 伪元素中，占位符选择器通过改变文本颜色和允许修改文本的样式来创建占位符文本。在大多数浏览器中，占位符（在 input 标签内）是灰色的。可以通过使用非标准的 ::placeholder 选择器，并在其中实现 color 属性，来修改此占位符的颜色。这种选择在不同浏览器之间存在差异。例如，Google Chrome、Mozilla Firefox 和 Opera。

示例将帮助我们理解 ::placeholder 选择器及其实现的概念。

示例

示例 1：在此示例中，::placeholder 选择器用于更改占位符文本的文本颜色和背景颜色。

输出

示例 2：此示例展示了如何使用 ::placeholder 选择器创建具有属性的占位符文本，该属性指示描述输入字段预期值的提示。

输出

示例 3：此代码演示了在多个浏览器中使用 ::placeholder 选择器。

输出

Chrome 输出

Microsoft Edge 输出

注意：Internet Explorer 不再支持占位符选择器。

示例 4：在 input 元素的 email 属性中，此代码提供了占位符选择器。占位符选择器可用于 input 元素的任何属性（文本、电话、密码等），以突出显示任何属性的颜色变化。

输出

Chrome 输出

Microsoft Edge 输出

Internet Explorer 输出

可用性

颜色对比度足够的占位符文本可能被解释为已输入的文本。当用户在元素中输入内容时，占位符文本也会消失。这两种情况都可能干扰表单的成功完成，特别是对于有认知障碍的用户。

提供占位符信息的另一种方法是将其放置在输入框外部，并与其在视觉上保持紧密联系，然后使用 aria-describedby 属性将其以编程方式与提示关联起来。

通过这种实现，即使信息已输入到输入字段中，提示内容仍然可用，并且在页面加载时输入显示为空白。大多数屏幕阅读器技术将使用 aria-describedby 来读取提示。

这种方法允许在页面加载时，输入看起来没有先前输入的内容，并且即使在输入字段中输入数据，提示内容仍然可用。在输入字段的标签文本读出后，大多数屏幕阅读器技术会使用 aria-describedby 来读取提示。如果附加信息是多余的，屏幕阅读器用户可以将其静音。

Windows 高对比度模式

在 Windows 高对比度模式下生成的占位符文本将与用户输入的文本内容具有相同的样式。因此，一些用户可能难以区分已输入的信息和占位符文本。

标签

占位符不会替换 <label> 元素。屏幕阅读器等辅助技术在没有使用 for 和 id 属性组合以编程方式将标签与输入关联起来的情况下，无法理解 <input> 元素。