::placeholder样式失效主因是浏览器兼容性及层叠规则，需同时声明四类前缀选择器并把标准写法放最后；安全属性仅限color、font-size等少数几个，opacity必须显式设为1。
为什么只写 ::placeholder 样式会失效
不是语法错了，是浏览器根本没执行你写的那条规则。Chrome 57+、Firefox 51+、Edge 16+ 支持 ::placeholder，但 Safari 15.3 及更早版本、Firefox 50、IE11 会直接忽略它。你看到“没生效”，大概率是因为目标用户正用着这些旧环境——尤其是企业内网系统或 iOS 16.3 以下设备。
更隐蔽的问题是：即使写了 ::placeholder，Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只设了 color，最终颜色也会变灰；Safari 对 rgba() 中 alpha 通道的解析不稳定，深色模式下可能直接不显示文字。
input::placeholder 必须和四个前缀规则一起写
不能靠“现代写法优先”偷懒，必须显式列出全部四类选择器，并把标准写法放在最后——否则带前缀的规则会覆盖它（CSS 层叠逻辑决定的）。
-
input::-webkit-input-placeholder：覆盖 Safari、Chrome、Edge（Blink/WebKit 内核） -
input::-moz-placeholder：注意是双冒号，对应 Firefox 19+；单冒号:-moz-placeholder仅在 Firefox 18–19 有效，现在可不写 -
input::-ms-input-placeholder：IE10–11 和旧 EdgeHTML -
input::placeholder：必须放最后，不然会被前面同名属性覆盖
推荐合并写法，避免重复维护：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
哪些 CSS 属性真能用，哪些一写就废
::placeholder 不是普通元素，它是伪元素 + 文本节点的混合体，浏览器实现限制极多。
安全可用（全平台基本一致）：
-
color（但别用inherit或currentcolor，Safari 可能继承 input 的 border 色导致“隐形”） -
font-size、font-weight、line-height -
text-transform、opacity（必须显式设1，不能依赖默认）
慎用（行为不一致）：
-
font-style：Safari 有时失效 -
text-align：Firefox 不稳定，尤其在 flex 布局中
根本别试（无效或触发渲染异常）：
-
background、border、padding、margin -
transform、filter、box-shadow
移动端真机测试时最容易漏掉的坑
iOS Safari 16–16.3 是个断层：它支持 ::placeholder，但对 opacity 解析有 bug，且 ::-webkit-input-placeholder 仍比标准语法更稳。所以即使项目声明只支持 iOS 16+，也不能省掉 WebKit 前缀。
另一个隐形陷阱是字体继承。如果你全局设了 font-family: system-ui，部分 Android WebView 会把 placeholder 字体 fallback 成等宽字体，显得突兀。建议单独控制：
input::placeholder { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
最后提醒一句：别用 CSS 变量做 color 值然后指望它自动适配深色模式——::placeholder 不响应 @media (prefers-color-scheme)，得手动写媒体查询覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
