CSS - 伪元素 - ::placeholder

描述

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

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

语法

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

无障碍问题

务必检查占位符文本颜色与输入背景之间的对比度。

如果颜色对比度高，占位符文本可能会与已输入文本混淆。为了避免这种混淆，您可以使用aria-describedby属性添加更接近的文本，为用户提供提示。

在 Windows 高对比度模式下，如果用户输入的文本与占位符文本具有相同的样式，则很难区分占位符文本和已输入文本。

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS ::placeholder 示例

这是一个::placeholder伪元素的示例

Open Compiler

<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可以获得完全不透明的占位符文本，如下例所示

Open Compiler

<html> 
<head>
<style>
   input::placeholder { 
      color: blue; 
      padding: 5px;
   }
   .opaque-text::placeholder {
      opacity: 1;
   }
</style>
</head>
<body>
   <h2>Execute on Firefox browser</h2>
   <div class="form">
      <input type="text" placeholder="Default Opacity">
      <input type="text" class="opaque-text" placeholder="Forced Opcaity">
   </div>
</body>
</html>

打印页面