根本原因是chrome与firefox对::placeholder的继承策略不同：chrome默认继承input的color，firefox基本不继承，因此需显式设置color且避免依赖继承或!important，同时兼顾safari版本差异及ui框架重置影响。
Chrome/Firefox里::placeholder颜色不一致，根本原因是继承策略不同
Chrome默认让::placeholder继承input的color，Firefox则基本不继承——所以同一段CSS在Firefox里常“没反应”。这不是bug，是渲染引擎设计差异。
- 必须显式写
color: #666，不能靠父级继承 - 加
opacity: 1，否则某些Chrome版本会把placeholder渲染得发灰（尤其深色背景时） - 避免用
!important，旧版Safari对伪元素里的!important支持不稳定
Safari 15.4以下必须补::-webkit-input-placeholder
Safari 15.0–15.3只认::-webkit-input-placeholder，标准::placeholder完全无效；15.4+才开始支持标准语法并废弃前缀。企业内网或老设备用户仍可能卡在这段版本区间。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 写法要并列：先写
input::-webkit-input-placeholder，再写input::placeholder（后者放后面，优先级更高） - 不要混用
::-moz-placeholder或:-ms-input-placeholder——这些在现代浏览器里已废弃，反而可能干扰层叠 - 如果项目明确不兼容Safari 14.x以下，这条可删；否则必须保留
UI框架重置样式导致::placeholder失效
Bootstrap、Ant Design这类框架常主动重置::placeholder，比如设color: #6c757d或opacity: 0.5，你的规则会被盖掉。
- 在DevTools里选中
input，展开::placeholder节点，看属性是否被strike-through - 临时禁用所有CSS文件，只留你的
::placeholder规则，确认是否真无效 - 提升选择器权重：改用
input.form-control::placeholder或#search-input::placeholder - 避免对
input用all: unset，它会清空伪元素样式
IE11及更老浏览器只能用JS模拟
IE11不支持任何::placeholder变体，连:-ms-input-placeholder都不生效。这时候CSS方案彻底失效，必须换思路。
- 用
<label></label>覆盖在input上方，通过focus/blur控制显隐 - 手动读取
input.getAttribute('placeholder')填入label文本 - 模拟元素必须加
pointer-events: none，否则点不到输入框 - 这种方案不是“改颜色”，而是绕过原生placeholder机制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
