必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四个选择器，标准写法放最后；Firefox需显式设opacity:1，Safari禁用rgba()调透明度，且仅支持color等有限文本属性。
只写 ::placeholder 在多数项目里会失效，必须补全四套浏览器前缀并处理继承与权重问题，否则 Safari 旧版、IE 或企业内网环境用户看到的还是默认灰黑色。
为什么 ::placeholder 样式经常不生效
不是代码写错了，而是浏览器根本不识别——Chrome 56 及更早、Firefox 19 及更早、IE10–11、Edge 12–18 都不支持标准双冒号写法。它们各自依赖私有前缀，漏掉任意一个，对应环境就退回原生样式。
-
::-webkit-input-placeholder：覆盖 Chrome ≤56、Safari ≤15.3、Opera、旧 Edge -
::-moz-placeholder和:-moz-placeholder（单冒号）：Firefox 18–19 必须用单冒号，20+ 才认双冒号；为保底建议两者都写 -
:-ms-input-placeholder：IE10–11 唯一有效写法，注意是单冒号 -
::-ms-input-placeholder：Edge 12–18 用双冒号，Edge 79+ 开始支持标准::placeholder
PostCSS 不会自动补全这些伪元素前缀，必须手写；*::placeholder 这种泛选器无效，必须精确到 input::placeholder 或 textarea::placeholder。
::placeholder 支持哪些 CSS 属性
它不是真实 DOM 元素，而是渲染层的文本投影，只接受有限的文本类样式，设了但没效果的属性会被静默丢弃，DevTools 里也看不到报错。
立即学习“前端免费学习笔记（深入）”；
- ✅ 能用：
color、font-size、font-family（必须显式声明，不继承父级）、opacity（Firefox 默认0.54，不重置会变浅）、text-align（对textarea有效） - ❌ 禁止：
background、padding、margin、border、width、height、display、content - ⚠️ 特别注意：
line-height单独写无效；得塞进font简写里，比如font: 14px/1.4 "Segoe UI", sans-serif
别给 ::placeholder 加 background：它不是画在 input 底层，而是叠在文字上，iOS Safari 下易闪烁或裁剪。
Vue/React 中 ::placeholder 失效怎么办
不是框架 bug，是 CSS 作用域机制天然隔离了伪元素。Vue 的 <style scoped> 会给选择器加属性，比如 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素。
- Vue：必须用
:deep(input::placeholder)显式穿透 - React + CSS Modules：得用
:global(input::placeholder) - 全局样式（如
index.css）不受影响，可直接写
另外，placeholder 属性本身没写，::placeholder 就不会渲染任何文字——它只美化，不生成内容。
聚焦时让占位符立即消失的稳妥写法
原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，不能靠 JS 监听，用 CSS 更轻量。
- 推荐：
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; } - 别用
color: transparent：部分浏览器渲染不稳定 - 别用
display: none：不被支持，且可能触发重排 - 过渡时间别超
0.2s，否则用户可能看到残留文字 - 对
textarea同样有效，但要单独写textarea:focus::placeholder
最常被忽略的一点：父级设置了 color，而 ::placeholder 继承性极弱，又没显式重置，结果就是你写了 color: #999，页面上还是浅灰色。
