::placeholder伪元素用于自定义输入框占位符样式，支持color、font-size等属性，可针对不同输入框设置，并建议添加厂商前缀以兼容旧版浏览器。
在css中，::placeholder 伪元素用于设置输入框（input、textarea）中占位符文本（即 placeholder 属性显示的提示文字）的样式。这个伪元素让你可以自定义提示文字的颜色、字体、大小等外观属性。
基本语法
input::placeholder {
color: #999;
font-size: 14px;
font-style: italic;
}
上面的代码会将所有 input 元素的提示文字颜色设为灰色，字体变小并倾斜。
支持的常见样式属性
::placeholder 支持以下常用css属性：
- color：改变提示文字颜色
- font-size：调整字体大小
- font-style：设置斜体
- font-weight：加粗或变细
- text-transform：控制大小写（如 uppercase）
- opacity：设置透明度（注意：不能用 opacity: 0 完全隐藏，部分浏览器仍保留最小可见度）
不同输入框的单独设置
你可以针对特定类型的输入框设置不同的提示样式：
立即学习“前端免费学习笔记（深入）”；
input[type=”text”]::placeholder {
color: #aaa;
}
textarea::placeholder {
color: #666;
font-size: 12px;
}
浏览器兼容性说明
现代浏览器普遍支持 ::placeholder，但为了更好的兼容性，尤其是旧版 webkit 浏览器（如 safari 和旧版 chrome），建议加上厂商前缀：
input::-webkit-input-placeholder { /* Safari, Chrome */
color: #999;
}
input::-moz-placeholder { / firefox 19+ /
color: #999;
}
input:-moz-placeholder { / Firefox 18- /
color: #999;
}
input:-ms-input-placeholder { / IE 10+ /
color: #999;
}
input::placeholder {
color: #999;
}
现在大多数情况下只需使用标准的 ::placeholder 即可，但如果需要支持较老版本浏览器，加上前缀更稳妥。
基本上就这些，合理使用 ::placeholder 能提升表单的视觉体验和用户友好度。