Chrome/Firefox中::placeholder颜色未生效因不继承父级color且浏览器默认opacity不同，需用!important和opacity:1覆盖；IE/旧Edge需多套兼容写法；密码框受安全策略限制更难定制。
Chrome/Firefox里改::placeholder颜色为什么没生效
因为::placeholder是伪元素，不是普通子节点，不继承父级color，必须显式设置。更关键的是，不同浏览器对伪元素的默认样式重置力度不同——Chrome 会把::placeholder的opacity设为0.52，Firefox设为0.6，所以即使写了color: #666，看起来还是发灰、偏淡。
- 必须加
!important覆盖浏览器内置样式（尤其Chrome） - 要同时写
opacity: 1才能让颜色真正“实”起来 - Firefox对
!important更敏感，漏掉容易失效
input::placeholder {
color: #999 !important;
opacity: 1;
}
IE和旧版Edge不支持::placeholder怎么办
IE完全不认::placeholder，旧版Edge（≤17）只支持::-ms-input-placeholder。如果你的项目还要兼容这些环境，就得写多套规则，而且顺序不能错——浏览器会忽略不认识的伪元素，但会按顺序解析，所以要把最宽泛的放前面，最具体的放后面，避免被覆盖。
-
::-webkit-input-placeholder：Safari、Chrome、新版Edge -
::-moz-placeholder：Firefox（注意没s，且带:-前缀） -
::-ms-input-placeholder：Edge ≤17 - 别漏掉
:placeholder-shown这个状态选择器，它在输入框有值时自动失效，适合做动态样式切换
input[type="password"]的占位符为啥特别难改色
密码框的::placeholder在部分Chrome版本里会被强制降权，尤其当页面启用了autocomplete="off"或存在某些安全策略时，浏览器可能直接屏蔽样式。这不是bug，是主动限制——防止通过样式诱导用户误判输入框类型。
- 优先用
input[type="text"]+type="password"动态切换，绕过原生限制 - 如果必须用原生
password，加transition: none能减少闪烁干扰 - 移动端Safari对密码框占位符支持极差，基本无解，建议统一用文字提示替代
用CSS变量动态控制::placeholder颜色行不行
可以，但要注意作用域。CSS变量必须定义在能被::placeholder继承的位置，而伪元素本身不继承所有属性，所以--placeholder-color得挂到input或其祖先上，并在伪元素里显式读取。
立即学习“前端免费学习笔记（深入）”；
- 别在
:root里定义后直接在::placeholder里用，某些浏览器不识别 - 推荐写法：
input { --placeholder-color: #aaa; } input::placeholder { color: var(--placeholder-color) !important; } - 配合JS切换主题时，记得同步更新
input元素上的style属性，而不是只改:root
真正麻烦的不是怎么写，而是不同浏览器对伪元素的渲染时机不一致——比如焦点进出时，Chrome可能延迟重绘，导致颜色闪一下。这种细节没法靠CSS兜底，得靠will-change: opacity或者干脆接受它。
