描述
::placeholder 伪元素表示 <input> 或 <textarea> 字段中的占位符文本。作为占位符的文本提供了需要在字段中输入的内容的提示。CSS 属性可用于更改文本的外观，例如，设置字体和颜色。
只有应用于 ::first-line 伪元素的 CSS 属性子集才能在其选择器中使用 ::placeholder 的规则中使用。
语法
selector::placeholder {
/* ... */
}
可访问性问题：
- 检查占位符文本的颜色与输入背景之间的对比度非常重要。
- 如果颜色对比度很高，则占位符文本可能会与输入的文本混淆。因此，为了避免这种混淆，您可以使用 aria-describedby 属性来添加更接近的文本，为用户提供提示。
- 在 Windows 高对比度模式下，当用户输入的文本以与占位符文本相同的样式呈现时，很难区分占位符文本和输入的文本。
- 占位符不能替代 <label> 元素。辅助技术无法解析 <input> 元素。
CSS ::placeholder 示例
下面是一个示例：::placeholder pseudo-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>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>
