使用::placeholder及浏览器前缀可自定义占位符样式，需注意兼容性与可读性。input::placeholder设置颜色、字体；结合::-moz-placeholder、::-webkit-input-placeholder、:-ms-input-placeholder确保各浏览器一致显示，避免浅色影响 readability，兼顾色盲用户，移动端需真机测试，继承全局样式时单独控制颜色和斜体。
在CSS中，placeholder 文本的样式可以通过伪元素选择器来自定义字体颜色、大小、字体族等。不同浏览器对 placeholder 的实现略有差异，因此需要使用带浏览器前缀的伪元素来确保兼容性。
使用 ::placeholder 伪元素
现代浏览器支持标准的 ::placeholder 伪元素，可以直接用来设置输入框中占位符文本的样式。
input::placeholder {
color: #999;
font-style: italic;
font-size: 14px;
font-family: 'Arial', sans-serif;
}
兼容不同浏览器的写法
为了覆盖主流浏览器（如 Chrome、Safari、Firefox、Edge），建议同时使用带前缀的伪元素规则。
/* Firefox */
input::-moz-placeholder {
color: #999;
font-style: italic;
}
/ Chrome, Edge, Safari /
input::-webkit-input-placeholder {
color: #999;
font-style: italic;
}
/ IE 10+ /
input:-ms-input-placeholder {
color: #999;
font-style: italic;
}
/ 标准语法 /
input::placeholder {
color: #999;
font-style: italic;
}
注意事项与技巧
自定义 placeholder 样式时，注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 避免使用过于浅的颜色，影响可读性
- 不要仅靠颜色传递信息，考虑色盲用户
- 某些移动端浏览器对 placeholder 样式支持有限，建议测试真机效果
- 如果设置了 input 的全局样式（如统一字体），placeholder 会继承部分样式，但仍需单独控制颜色和斜体等
基本上就这些。只要组合使用标准和带前缀的伪元素，就能在大多数设备上实现一致的 placeholder 字体颜色与样式定制。
