根本原因是浏览器对::placeholder渲染逻辑不一致：firefox默认opacity0.53压暗文字，safari15.4前仅支持-webkit前缀，chrome依赖继承但其他浏览器不兼容；需显式设color和opacity、并列写四条前缀规则、避免scoped样式隔离及!important。
根本原因不是写法错，而是浏览器对 ::placeholder 的渲染逻辑和默认行为不一致——Firefox 默认压暗、Safari 默认叠加、Chrome 默认继承，三者互不兼容。
Firefox 里颜色“没反应”，其实是 opacity 在捣鬼
Firefox 对 ::placeholder 的默认 opacity 是 0.53，哪怕你写了 color: #666，它也会把文字压得极淡，尤其在深色背景上几乎看不见。这不是样式没生效，是透明度盖过了颜色。
- 必须显式声明
opacity: 1（或设计需要的值，如0.7），不能省略 - 别用
color: rgba(102, 102, 102, 0.7)代替——Firefox 不吃这套，alpha 通道被忽略 - 如果用了 UI 框架（如 Ant Design），检查它是否悄悄设了
opacity: 0.5，你的规则可能被覆盖
Safari 15.4 之前根本不认 ::placeholder
Safari 15.0–15.3 只支持 ::-webkit-input-placeholder，标准双冒号语法完全无效；15.4+ 才开始支持并逐步废弃前缀。企业内网或 iOS 老设备用户仍大量卡在这个区间。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须并列写四条：
input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder、input::placeholder - 顺序很重要：把标准写法
input::placeholder放最后，避免被前缀规则意外覆盖 - 不要用逗号合并成一条选择器（如
input::placeholder, input::-webkit-input-placeholder），旧引擎会整条丢弃
Chrome 看起来正常，其实靠的是“继承”陷阱
Chrome 默认让 ::placeholder 继承 input 的 color，所以你只给 input 设颜色，placeholder 就跟着变——但这在 Firefox 和 Safari 里完全不成立。
- 绝不能依赖继承，所有
::placeholder规则都必须显式写color和opacity - 避免用
!important：旧版 Safari 对伪元素里的!important支持不稳定，反而导致失效 - 如果用了
* { all: unset; }或input { appearance: none; }，::placeholder渲染通道会被切断，DevTools 里显示为“已禁用”
Vue/React 里样式“消失”，其实是作用域隔离了伪元素
::placeholder 是伪元素，不是真实 DOM 节点，<style scoped></style> 或 CSS Modules 会自动加属性哈希（如 input[data-v-xxx]::placeholder），但浏览器不支持带属性的选择器匹配伪元素。
- Vue 单文件组件中，必须用
:deep(input::placeholder)穿透作用域 - React + CSS Modules 中，得用
:global(input::placeholder)包裹规则 - 某些 UI 库（如 Element Plus）自带重置逻辑，直接搜它的 CSS 源码，确认是否覆盖了
::placeholder
最容易被忽略的，是 Firefox 对继承的“洁癖”和 Safari 对 opacity 的保守叠加——它们不报错、不警告，只让颜色看起来“有时有效、有时无效”，排查时得盯着 DevTools 的 Computed 面板，逐条比对 opacity 和 color 的最终计算值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
