css输入框占位文字样式怎么改_使用css::placeholder伪元素
可通过::placeholder伪元素修改输入框占位文字样式，需添加浏览器前缀确保兼容，其仅在空且未聚焦时显示，支持color、font-size等文本属性，不支持盒模型属性。
可以通过 ::placeholder 伪元素来修改输入框（ 或 ）中占位文字（placeholder）的样式，比如颜色、字体大小、透明度等。
基础用法：设置颜色和字体
最常用的是改变占位文字颜色，避免与背景色冲突或提升可读性：
input::placeholder {
color: #999;
font-size: 14px;
font-style: italic;
}兼容不同浏览器的写法
由于历史原因，各浏览器前缀略有差异，建议加上主流前缀确保兼容性：
input::placeholder {
color: #
666;
}
input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
color: #666;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #666;
opacity: 1; /* Firefox 默认会降低透明度，需重置 */
}
input:-ms-input-placeholder { /* IE 10-11 */
color: #666;
}
input::-ms-input-placeholder { /* Edge */
color: #666;
}
666;
}
input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
color: #666;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #666;
opacity: 1; /* Firefox 默认会降低透明度，需重置 */
}
input:-ms-input-placeholder { /* IE 10-11 */
color: #666;
}
input::-ms-input-placeholder { /* Edge */
color: #666;
}注意 placeholder 的显示逻辑
占位文字只在输入框为空且未获得焦点时显示；一旦用户开始输入或输入框获得焦点，它就会隐藏。因此不能用 :focus::placeholder 控制聚焦时的样式——它不会生效。如需聚焦时隐藏 placeholder，可用 JS 清空或用 CSS 隐藏：
- 聚焦时让 placeholder 不显示（视觉上）：
input:focus::placeholder { color: transparent; } - 但更推荐保持语义清晰，不强行隐藏，除非有明确交互需求
支持的 CSS 属性有限
::placeholder 支持的样式较基础，常见可用属性包括：
- color（最常用）
- font-size / font-family / font-weight
- opacity（注意 Firefox 默认为 0.53，常需设为 1）
- text-transform、letter-spacing 等文本相关属性
- 不支持
background、padding、border等盒模型属性
