使用 ::placeholder 伪元素可自定义表单输入框占位符颜色和字体样式，如 input::placeholder { color: #999; }，支持现代浏览器，兼容旧版需添加前缀写法，注意仅能设置文字相关样式且应保证可读性。
表单输入框的占位符（placeholder）默认颜色通常较浅，有时与页面风格不匹配。可以通过 CSS 的 ::placeholder 伪元素来自定义其颜色，甚至设置字体大小、样式等。
使用 ::placeholder 修改颜色
直接对输入框使用 ::placeholder 伪元素，设置 color 属性即可改变占位符文字的颜色。
input::placeholder {
color: #999;
}
这个规则会让所有 input 元素的占位符文字变成灰色。你也可以针对特定输入框设置：
.custom-input::placeholder {
color: #ccc;
font-style: italic;
}
兼容性处理（可选）
虽然现代浏览器普遍支持 ::placeholder，但为了兼容更老的浏览器，可以加上带前缀的写法：
立即学习“前端免费学习笔记（深入）”；
/* WebKit 浏览器 */
input::-webkit-input-placeholder {
color: #999;
}
<p>/<em> Firefox 18- </em>/
input:-moz-placeholder {
color: #999;
}</p><p>/<em> Firefox 19+ </em>/
input::-moz-placeholder {
color: #999;
}</p><p>/<em> 标准语法 </em>/
input::placeholder {
color: #999;
}</p>现在大多数项目只需使用标准语法 ::placeholder 即可，除非需要支持非常旧的浏览器版本。
注意事项
- ::placeholder 只能修改伪元素的有限样式，如 color、font、text-transform 等，不能设置 margin、padding。
- 如果输入框已有文本，占位符自动隐藏，样式不会影响实际输入内容。
- 建议避免使用过浅或过深的颜色，确保可读性和用户体验。
基本上就这些，不复杂但容易忽略细节。
