Chrome/Firefox中::placeholder不生效主因是全局重置规则清除了伪元素渲染通道；Safari需显式设置opacity；旧版Edge/Android需补全-webkit-/-ms-前缀；CSS变量需在:root定义且显式调用。
Chrome/Firefox里::placeholder不生效？检查伪元素是否被重置
很多同学写完 ::placeholder 发现完全没反应，不是代码写错，而是父级或全局样式里用了 * { all: unset; } 或 input { appearance: none; } 这类强重置规则——它们会清掉伪元素的默认渲染通道。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中输入框，切到“Computed”面板，搜
placeholder，看::placeholder对应的样式是否显示为“已禁用”或“继承自无” - 在目标
input或textarea的直接样式里加一句color: inherit;，再试::placeholder—— 有时继承链断裂是主因 - 避免在全局 CSS 里对
::placeholder做display: none或content: ""，这在 Safari 里会彻底屏蔽提示文字
Safari 中::placeholder颜色/透明度异常？必须显式声明opacity
Safari（尤其是 iOS 15+ 和 macOS Monterey 后）对 ::placeholder 的 opacity 处理很保守：哪怕你只设了 color，它也会按内部默认透明度叠加，导致文字发虚或看不见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远同时设置
color和opacity，比如：input::placeholder { color: #999; opacity: 1; } - 不要依赖
rgba()控制透明度，Safari 会忽略 alpha 通道对 placeholder 的影响 - 如果要用浅灰文字配深背景，优先调
color值，而不是靠opacity: 0.6去压暗——后者在 Safari 下可能直接变不可见
需要兼容老版 Edge 或 Android Webview？补全带前缀的写法
Edge 17–18 和部分 Android 系统 WebView（如 Android 7–9 的 Chrome 50–65 内核）不认标准 ::placeholder，必须加 ::-ms-input-placeholder 和 ::-webkit-input-placeholder。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 三个声明必须分开写，不能合并成逗号分隔的选择器——
::placeholder, ::-webkit-input-placeholder在旧引擎里会整条失效 - 顺序很重要：把标准写法放最后，避免被前缀规则意外覆盖
- Android 4.4 的 WebView 不支持
::placeholder任何变体，真要兼容就得用 JS 模拟提示文字（比如 focus/blur 切换 value）
用 CSS 变量动态改 placeholder 样式？注意作用域和继承限制
::placeholder 是伪元素，它**不继承**父元素上通过 style="--color: red" 设置的 CSS 变量，除非你显式用 var(--color) 调用，且该变量在 :root 或当前选择器作用域内已定义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 变量必须定义在
:root或至少是 input 的父容器上，且确保没有同名变量被更近的作用域覆盖 - 别在
::placeholder里写color: var(--text-placeholder, #aaa)却忘了在:root里定义--text-placeholder——这会导致回退值生效，但你以为变量起作用了 - 想根据主题切换 placeholder 颜色？直接监听 class 切换，用
.theme-dark input::placeholder这种方式比依赖变量更稳
真正麻烦的从来不是怎么写 ::placeholder，而是它在不同渲染引擎里被当作“可有可无的装饰性内容”来对待——所以一旦涉及深色模式适配、高对比度系统设置、或屏幕阅读器交互，它的表现就容易出乎意料。
