修改表单输入框提示文字颜色，可使用CSS的input-placeholder伪元素。
2026-05-23 12:17:15
0浏览
收藏
本文深入解析了CSS中修改表单输入框占位符（placeholder）文字颜色的核心技术与实战陷阱，不仅明确了`::placeholder`作为现代标准写法的权威地位及主流浏览器兼容性，更系统揭示了样式失效的五大常见原因——从语法错误、选择器匹配失败、优先级冲突，到框架构建工具干扰、继承误解；同时覆盖了多浏览器前缀的科学补全策略、暗色模式下的手动适配方案、悬停变色的跨浏览器实现细节，以及极易被忽视的排版协同影响（如font-size、line-height、padding对占位符显示效果的决定性作用），是一份兼顾规范性、兼容性与工程落地的前端样式实践指南。
::placeholder 是唯一可靠、标准且现代的写法，直接生效于 Chrome 57+、Firefox 52+、Safari 10.1+、Edge 79+。老版本浏览器（如 IE11、旧版 Safari）需补前缀，但不是靠堆砌所有前缀——而是按需兜底。
为什么 ::placeholder 写了没反应？
常见失效原因不是语法错，而是被更高优先级规则压制或选择器不匹配：
- 写成
:placeholder（少一个冒号）→ 完全无效，CSS 解析器直接忽略 - 在 Vue
