::placeholder伪元素仅能美化已设置的placeholder属性内容，需写全四套浏览器前缀才兼容旧版；仅支持有限文本样式，不生效常因继承断裂或框架重置。
::placeholder 伪元素本身不能“修改”提示文字内容，只能美化已通过 placeholder 属性设置好的文字。没写 placeholder="请输入邮箱"，CSS 再多规则也渲染不出任何提示。
必须写全四套前缀，否则老浏览器直接不认
只写 input::placeholder 在 Chrome 57+、Firefox 51+、Edge 79+ 没问题，但 Safari 10–15.3、IE 10–11、旧版 Android WebView 会完全忽略。这些环境只识别带前缀的写法：
-
input::-webkit-input-placeholder（Chrome ≤56、Safari ≤15.3、Opera） -
input::-moz-placeholder（Firefox 19+；注意 Firefox 18 只认单冒号:-moz-placeholder，但基本可忽略） -
input:-ms-input-placeholder（IE 10–11）和input::-ms-input-placeholder（Edge 12–18） -
input::placeholder（标准写法，放最后）
别指望 PostCSS 自动补全——它对伪元素前缀基本不处理；也别用逗号合并写法，比如 input::placeholder, input::-webkit-input-placeholder，旧引擎可能整条规则失效。
能设的样式非常有限，设了 background/padding 也没用
::placeholder 不是真实 DOM 元素，而是渲染层的文本投影，只接受部分文本类属性：
- ✅ 安全可用：
color、font-size、font-family、font-weight、opacity、line-height（但独立写line-height: 1.4无效，得塞进font简写里）、text-transform（iOS Safari 15.4 前不支持uppercase） - ❌ 静默丢弃：
background、padding、margin、border、width、height、display—— 浏览器不报错，但你调半天也看不出变化
line-height 尤其容易踩坑：如果 input 自身设了 line-height: 2，而 ::placeholder 没重置，Safari 可能把文字压到顶部或截断；建议显式写 line-height: normal 或匹配父级值。
常见不生效原因：不是代码错，是被覆盖或继承断裂
DevTools 里看到 ::placeholder 规则被划掉？大概率是以下情况之一：
- 全局 CSS 里写了
input { color: #333; }，而::placeholder默认继承性极弱，没显式重写就会“消失” - UI 框架（如 Ant Design、Bootstrap）主动重置了它，比如设成
color: #6c757d或opacity: 0.5 - 用了
all: unset或appearance: none，清掉了伪元素的默认渲染通道 - Vue 的
<style scoped></style>或 React CSS Modules 把选择器自动加了属性，比如变成input[data-v-xxx]::placeholder，但浏览器不支持这种组合匹配 —— Vue 要用:deep(input::placeholder)，React 要用:global(input::placeholder)
排查时先临时禁用所有外部 CSS，只留你的规则；确认有效后，再用更具体的选择器链（如 .form-control input::placeholder）提升优先级。
Safari 和 Firefox 对 opacity 处理特别敏感
Firefox 默认给 ::placeholder 设了 opacity: 0.53，不显式声明就比预期淡得多；Safari（尤其是 iOS 15+）则对 opacity 极其保守，哪怕只设 color，它也会叠加内部透明度导致发虚。
实操上必须同时写：
input::placeholder {
color: #999;
opacity: 1;
}
别用 rgba(153, 153, 153, 0.7) 控制透明度 —— Safari 会忽略 alpha 通道；也别依赖 opacity: 0.6 去压暗，浅灰配深背景时，它在 Safari 下可能直接不可见。
最常被忽略的点：伪元素不继承通过 style="--color: red" 设置的 CSS 变量，除非你在规则里显式写 color: var(--color)，且该变量已在 :root 或当前作用域定义好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
