::placeholder不生效主因是父级样式覆盖、浏览器兼容性缺失及伪元素样式限制；需加全前缀、用!important强制color，且仅支持有限CSS属性。
Chrome/Firefox 中 ::placeholder 不生效的常见原因
最常见的情况是父容器或表单元素设置了 color、opacity 或 filter，导致伪元素继承后被“压暗”或“隐藏”。::placeholder 的样式优先级本身较低，且不继承所有属性——比如 font-size 会继承，但 color 在部分浏览器中会被强制覆盖为浅灰色。
另一个高频问题是：未加浏览器前缀就直接写 ::placeholder，而旧版 Chrome（≤56）、Safari（≤11.1）和 Edge（≤17）只识别带前缀的写法。
必须写的兼容写法（含前缀 + color 强制覆盖）
要确保所有主流浏览器都显示自定义占位符颜色，需同时声明四个版本，并用 !important 确保 color 不被重置。注意：::placeholder 和 ::-ms-input-placeholder 是双冒号，而 :-moz-placeholder 是单冒号（仅 Firefox 18–19）。
:input::placeholder {
color: #888 !important;
}
:input::-webkit-input-placeholder {
color: #888 !important;
}
:input::-moz-placeholder {
color: #888 !important;
}
:input:-ms-input-placeholder {
color: #888 !important;
}
如果只对 或 单独控制，把 :input 换成 input 或 textarea 即可；但建议用 :input 伪类统一匹配所有可输入元素。
立即学习“前端免费学习笔记（深入）”；
字体大小、透明度等其他样式注意事项
::placeholder 支持有限样式：基本只允许 color、font-size、font-weight、text-transform、opacity、line-height（部分浏览器），不支持 background、border、padding 等盒模型属性。
-
opacity值设为1可避免被父级透明度影响，比依赖rgba()更可靠 - 在 Safari 中，
font-size若设为em或rem，可能因继承链异常变小，建议用px或rem配合html根字体控制 - Firefox 对
text-align支持不稳定，不要依赖它居中提示文字
Vue/React 中动态 placeholder 样式失效怎么办
框架里通过 v-bind:style 或 style={...} 绑定内联样式，无法作用于伪元素——因为 ::placeholder 不是真实 DOM 节点，不能被 JS 直接操作或内联 style 控制。
解决方式只有两个：
- 提前在 CSS 文件中写好带变量名的规则（如
.input--warning::placeholder），再用 class 切换 - 用
document.styleSheets动态插入 CSSRule（不推荐，维护成本高）
别试图用 ref 获取 input 元素后 setAttribute 修改 placeholder 文本并期望样式联动——文本变了，样式仍走 CSS 规则，和内容无关。
真正容易被忽略的是：某些 UI 库（如 Element Plus、Ant Design）内部重置了 ::placeholder，必须提高选择器权重（例如加 !important 或用 body .el-input::placeholder）才能覆盖。
