直接给input设color对placeholder无效，因为placeholder是独立伪元素，不继承父级color样式，必须用::placeholder显式设置，且需配合opacity:1才能在firefox等浏览器中正常显示。
因为 color 属性根本不作用于 placeholder —— 它只控制用户输入的文本，而 placeholder 是独立伪元素，必须用 ::placeholder 显式设置。
为什么直接给 input 设 color 对 placeholder 无效？
placeholder 不是普通文本节点，也不在 DOM 中；它是浏览器渲染的伪内容，和 ::before 类似，有自己独立的样式上下文。即使你写 input { color: #f00; } 或内联 style="color:red"，它对 placeholder 零影响。这不是 bug，是规范行为：CSS 继承链不经过伪元素。
常见错误现象：
- DevTools 里看到
input的color值是红色，但 placeholder 还是灰色 - 父容器设了
color: inherit，placeholder 依然不跟着变 - 用 JS 修改
element.style.color，placeholder 文字颜色毫无反应
::placeholder 不生效？优先检查这三件事
即使写了 input::placeholder { color: #666; }，也可能白写。原因通常是：
- 被更高优先级的选择器覆盖：比如全局
input { color: #333; }没问题，但某些 UI 框架（如 Bootstrap）会主动重置input.form-control::placeholder { color: #6c757d; opacity: 0.5; }，直接盖掉你的规则 - 浏览器前缀缺失：Safari 13.1 及更早只认
::-webkit-input-placeholder，Firefox 18–56 要::-moz-placeholder，IE11 完全不支持标准写法，得靠:-ms-input-placeholder - opacity 默认值干扰：Firefox 默认把 placeholder 渲染得很淡（
opacity: 0.5左右），光设color不够，必须显式加opacity: 1
兼容写法怎么组织才稳妥？
不要只写一个 ::placeholder，也不要按“现代优先”把前缀全删掉——企业内网、旧版 Safari、遗留 Edge 仍大量存在。推荐按如下顺序并列书写（顺序无关，但标准写法放最后便于未来清理）：
input::placeholder { color: #999; opacity: 1; }
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; opacity: 1; }
关键点：
- 所有规则都必须带
opacity: 1，尤其 Firefox 和部分 Chrome 版本依赖它才能看清文字 - 避免用
!important：旧版 Safari 对伪元素里的!important支持不稳定 - 如果框架重置了样式，就提升选择器权重：比如用
input.my-field::placeholder或#search-input::placeholder
还有哪些样式能用？哪些踩了就翻车？
::placeholder 支持有限属性，不是所有文本样式都能套用：
- 安全可用：
color、font-size、font-family、font-weight、text-transform、line-height - 慎用或无效：
background-color（Firefox 不支持，旧版 Safari 可能报错）、border、transform、box-shadow、display - 特别注意：
all: unset或all: initial作用于input时，会清空 placeholder 所有样式，包括你自己写的::placeholder
真正容易被忽略的是：哪怕你把所有前缀都写全了，只要漏了 opacity: 1，在 Firefox 里大概率还是看不见效果——这不是颜色没设对，是它被浏览器默认压暗了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
