CSS 伪元素

描述

::placeholder 伪元素表示 <input> 或 <textarea> 字段中的占位符文本。作为占位符的文本给出了需要在字段中输入的内容的提示。 CSS 属性可用于更改文本的外观，例如，设置字体和颜色。

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

语法

selector::placeholder {
    /* ... */
}

辅助功能问题:

  • 检查占位符文本颜色与输入背景之间的对比度非常重要。

  • 如果颜色对比度很高，占位符文本可能会与输入的文本混淆。因此，为了避免这种混乱，您可以使用 aria-scribedby 属性来添加更接近的文本，从而向用户提供提示。

  • 当用户输入文本时使用与占位符文本相同的样式呈现，在 Windows 高对比度模式下，很难区分占位符文本和输入的文本。

  • 占位符不是替换 <label> 元素。辅助技术无法解析 <input> 元素。

CSS ::placeholder 示例

这里是 ::placeholder 伪代码的示例-element:

<html> 
<head>
<style>
   .form {
      border: 2px solid black;
      background: lightgray;
      margin: 15px;
      padding: 25px;
      width: 250px;
   }

   input::placeholder { 
      color: grey; 
      font-style: italic;
      background-color: cornsilk;
      padding: 5px;
   }

   input {
      margin-bottom: 3px;
   }
</style>
</head>
<body>
   <div class="form">
      <input type="text" placeholder="First Name">
      <input type="text" placeholder="Last Name">
      <input type="text" placeholder="Address">
      <input type="text" placeholder="Phone">
   </div>
</body>
</html>

CSS 伪元素 ::placeholder: 不透明文本

此功能只能在 Firefox 上查看。

像 Firefox 这样的浏览器设置占位符的不透明度小于 100%。设置 opacity:1 以获取完全不透明的占位符文本，如以下示例所示:

<html> 
<head>
<style>
   input::placeholder { 
      color: blue; 
      padding: 5px;
   }
   .opaque-text::placeholder {
      opacity: 1;
   }
</style>
</head>
<body>
   <h2>在Firefox浏览器上执行</h2>
   <div class="form">
      <input type="text" placeholder="默认不透明度">
      <input type="text" class="opaque-text" placeholder="强制不透明">
   </div>
</body>
</html>