Firefox中::placeholder默认opacity为0.53，必须显式声明opacity值（如1或0.7）才能确保颜色正常显示，仅设color无效；Safari对opacity处理保守，需同时声明color和opacity，且避免使用rgba()或display:none。

Firefox里::placeholder默认opacity是0.53

不设opacity，Firefox会悄悄把提示文字压暗，比你预期的浅灰更淡，尤其在深色背景上容易看不见。这不是bug，是它的默认行为。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 所有::placeholder规则里必须显式写opacity: 1或opacity: 0.7等具体值，不能省略
• 别指望color: #999单独生效——它只管色值，不控制明暗强度
• 如果设计稿要求“弱提示感”，优先调低opacity（比如0.6），而不是用更浅的color（比如#ccc），后者在Safari里可能直接不可见

Safari对opacity处理极保守

iOS 15+ 和 macOS Monterey 后的 Safari，哪怕你只写了color，它也会叠加一个内部默认透明度，导致文字发虚、边缘模糊，甚至完全消失。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• ::placeholder中永远同时声明color和opacity，例如：input::placeholder { color: #666; opacity: 1; }
• 避免用rgba()控制颜色透明度，Safari会忽略alpha通道对placeholder的影响
• 深色背景下要用浅灰文字？调color值（如#b0b0b0），而不是靠opacity: 0.4去“压暗”——后者在Safari下可能直接归零

Chrome/Firefox里::placeholder被全局重置规则干掉

很多项目用了* { all: unset; }或input { appearance: none; }，这些强重置会切断伪元素的渲染通道，导致::placeholder样式完全不生效，DevTools里显示为“已禁用”或“继承自无”。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用浏览器开发者工具选中input，切到“Computed”面板，搜索placeholder，确认样式是否被覆盖或失效
• 在目标input或textarea的选择器里加一句color: inherit;，修复继承链断裂
• 避免在全局CSS里对::placeholder写display: none或content: ""——Safari会彻底屏蔽提示文字

Vue/React中scoped样式穿透失效

<style scoped>或CSS Modules会自动给选择器加属性哈希，变成类似input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• Vue单文件组件中，必须用:deep(input::placeholder)穿透作用域
• React + CSS Modules中，得用:global(input::placeholder)包裹规则
• 某些UI库（如Element Plus）自带重置逻辑，检查其CSS源码是否覆盖了::placeholder，必要时提高选择器优先级

真正卡住人的，往往不是写错语法，而是没意识到opacity在不同浏览器里根本不是同一个东西——Firefox默认压暗，Safari默认叠加，而你的CSS变量或scoped样式又悄悄把它隔在作用域之外。