使用 ::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;
}
/ Firefox 18- /
input:-moz-placeholder {
color: #999;
}
/ Firefox 19+ /
input::-moz-placeholder {
color: #999;
}
/ 标准语法 /
input::placeholder {
color: #999;
}

现在大多数项目只需使用标准语法 ::placeholder 即可，除非需要支持非常旧的浏览器版本。

注意事项

• ::placeholder 只能修改伪元素的有限样式，如 color、font、text-transform 等，不能设置 margin、padding。
• 如果输入框已有文本，占位符自动隐藏，样式不会影响实际输入内容。
• 建议避免使用过浅或过深的颜色，确保可读性和用户体验。

基本上就这些，不复杂但容易忽略细节。