可通过::placeholder伪元素设置输入框占位符样式，需兼顾::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder等前缀以确保兼容性，支持color、font-size、opacity等文本属性，但不支持display、padding等盒模型属性。
可以通过 ::placeholder 伪元素单独设置表单输入框（如 或 ）中占位符文字的样式。
基本写法与兼容性注意
::placeholder 是标准写法，但不同浏览器对前缀支持不一。为确保兼容性，建议同时使用带前缀的版本：
-
::placeholder（现代标准，Chrome 57+、Firefox 51+、Safari 10.1+、Edge 79+） -
::-webkit-input-placeholder（旧版 Chrome/Safari/Opera） -
::-moz-placeholder（Firefox 18–19，仅支持单冒号） -
::-ms-input-placeholder（IE10–11）
可设置的常见样式属性
占位符文字支持大部分文本相关 CSS 属性，例如：
- color：修改文字颜色（最常用）
- font-size / font-family：调整字体大小和字体类型
- opacity：控制透明度（注意：设为 0 会完全隐藏，但可能影响可访问性）
-
text-align：对齐方式（需注意在
中更明显） - line-height：行高（配合高度使用时需谨慎，避免错位）
实际应用示例
以下是一段兼顾兼容性的占位符样式代码：
立即学习“前端免费学习笔记（深入）”；
input::placeholder,
textarea::placeholder {
color: #999;
font-size: 14px;
opacity: 0.8;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
font-size: 14px;
opacity: 0.8;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #999;
font-size: 14px;
opacity: 0.8;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: #999;
font-size: 14px;
opacity: 0.8;
}
注意事项与限制
占位符不是真实 DOM 节点，因此有如下限制：
- 无法设置
display、padding、margin等盒模型属性（部分浏览器可能忽略） - 不能用
!important覆盖内联样式（除非目标元素本身也用了!important） - 在暗色模式下，若未适配，浅色占位符可能对比度不足，建议结合
@media (prefers-color-scheme: dark)调整 - 某些 UI 框架（如 Ant Design、Element Plus）会封装输入组件，需检查是否已覆盖或禁用原生 placeholder 样式
