最直接方式是使用::placeholder伪元素（chrome 57+、firefox 51+、edge 16+支持），需写为双冒号且配合color属性；旧版safari需补::-webkit-input-placeholder；ie11须js模拟；深色模式下应配合@media (prefers-color-scheme: dark)适配。
Chrome/Firefox/Edge中用::placeholder改颜色最直接
现代浏览器（Chrome 57+、Firefox 51+、Edge 16+）都支持::placeholder伪元素，这是改输入框占位符颜色的首选方式。它作用于<input>和<textarea></textarea>，写法简洁，优先级也比老式::-webkit-input-placeholder高。
常见错误是漏掉冒号数量（写成:placeholder）或加了空格（如:: placeholder），导致样式完全不生效。
- 必须用双冒号：
::placeholder，单冒号:placeholder是无效的 - 建议配合
color使用，避免用opacity——后者会连带影响文字可读性 - 如果输入框有
disabled状态，::placeholder不会生效，此时需单独处理:disabled::placeholder
input::placeholder,
textarea::placeholder {
color: #999;
}
Safari 14.1以下必须补::-webkit-input-placeholder
Safari 14.1之前版本不识别标准::placeholder，只认::-webkit-input-placeholder。虽然现在多数用户已升级，但若项目需兼容旧版Safari（比如企业内网环境），就得显式补充。
注意：这个前缀版本不能写成::-moz-placeholder或::-ms-input-placeholder——那些早已废弃，且在当前主流版本中反而可能触发冗余规则或覆盖问题。
- 仅当目标Safari版本 ≤ 14.0 时才需要这条规则
- 把它放在
::placeholder之后，确保现代写法优先；或者用@supports做条件加载 - 不要为同一选择器重复声明
color，否则容易因层叠顺序混乱导致颜色意外回退
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
}
IE11及更老浏览器只能靠JavaScript模拟
IE11根本不支持任何::placeholder变体，::-ms-input-placeholder在Edge 12–15中可用，但IE11下完全失效。这时候CSS方案彻底失效，必须换思路。
核心思路是：用<label></label>或<span></span>覆盖在输入框上方模拟占位符，通过focus/blur事件控制显隐。这不是“改颜色”，而是“重做占位逻辑”。
- 不能依赖
placeholder属性值自动渲染，得手动读取input.getAttribute('placeholder') - 模拟元素需设
pointer-events: none，否则会拦截点击，导致无法聚焦输入框 - 输入框内容为空且未聚焦时才显示模拟占位符，这两者状态都要监听
深色模式下color值容易被系统强制覆盖
某些系统级深色模式（尤其是macOS + Safari）会忽略CSS设置的color，强行把占位符变成浅灰甚至白色，哪怕你写了color: #333 !important也没用。
这不是bug，而是浏览器主动适配系统语义——占位符本意就是弱提示，系统认为深背景上深色文字可读性差，就做了干预。
- 唯一可靠解法是用
@media (prefers-color-scheme: dark)手动适配，比如设color: #aaa - 避免用
!important硬顶，它在深色模式下常被忽略 - 如果设计要求占位符在深色模式下必须为某种特定色（如品牌蓝），那就得放弃原生
placeholder，走JS模拟路线
::placeholder，而是判断当前项目到底要兼容谁——Safari旧版？IE11？还是系统深色模式下的视觉一致性。选错路径，后面全是补丁。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
