直接写::placeholder有时无效，因浏览器前缀不统一：Safari旧版需::-webkit-input-placeholder，老Firefox需::-moz-placeholder（单冒号），须全写才能全平台生效。
为什么直接写 ::placeholder 有时没效果
因为浏览器前缀没对齐，::placeholder 在不同内核下写法不同。Chrome/Edge（Blink）、Firefox（Gecko）支持标准写法，但 Safari（WebKit）旧版本只认 ::-webkit-input-placeholder，而 Firefox 早些版本还要用 ::-moz-placeholder（注意是单冒号）。不加兼容写法，Safari 或老 Firefox 就会失效。
- 现代写法优先用双冒号
::placeholder，但必须搭配前缀才真正全平台生效 - 不能只写一个，否则 iOS Safari 里 placeholder 字体颜色、大小可能完全不变
-
伪元素继承自父级的
font相关属性有限，比如line-height和text-align通常不继承，得单独设
::placeholder 支持哪些 CSS 属性
它只支持一部分样式属性，不是所有文本样式都能用。比如 color、font-size、font-family、opacity 都可以；但 background-color 在部分 Safari 版本中无效，border、padding、margin 完全不生效——这些属于 input 框自身，不是 placeholder 的渲染范围。
- 能用：
color、font-size、font-weight、opacity、text-transform - 不能用：
background、border、padding、margin、width、height -
opacity是个实用技巧：设成0.6比硬调color: #999更符合设计系统中的“弱提示”语义
完整兼容写法示例
把所有主流前缀和标准写法都列出来，CSS 会自然忽略不支持的那几行，不会报错。顺序无关紧要，但建议把标准写法放最后，方便未来清理。
input::placeholder {
color: #777;
font-size: 14px;
opacity: 0.6;
}
input::-webkit-input-placeholder {
color: #777;
font-size: 14px;
opacity: 0.6;
}
input::-moz-placeholder {
color: #777;
font-size: 14px;
opacity: 0.6;
}
input:-ms-input-placeholder {
color: #777;
font-size: 14px;
opacity: 0.6;
}
Vue/React 项目里要注意作用域样式穿透
如果用了 scoped CSS（如 Vue 的 或 React 的 CSS Modules），::placeholder 伪元素会被加上属性选择器，导致匹配失败。需要显式穿透，否则样式压根不会应用到 placeholder 上。
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件中，加
deep或:deep()：用:deep(input::placeholder) - React + CSS Modules 中，用
:global(input::placeholder)包裹规则 - Next.js 的
app/目录默认禁用 CSS-in-JS 作用域，但如果用了className动态拼接或第三方库封装的 input，仍需检查最终生成的 class 是否被隔离
