必须手写四套浏览器前缀（::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder、:-ms-input-placeholder）并配合::placeholder，且每条均需设置opacity:1，否则旧版Safari、IE等环境将完全不识别或显示默认灰黑色；仅支持color、font-size等文本属性，禁用background、padding等盒模型样式。
直接写 input::placeholder 在现代浏览器里能改颜色，但只写这一条，Safari 旧版、IE、部分企业内网环境里的用户根本看不到效果——它不是“不生效”，是压根不识别。
必须手写四套前缀，PostCSS 不会补全
Chrome ≤56、Firefox ≤19、IE 10–11、Edge 12–18 都不支持标准 ::placeholder。漏掉任意一个前缀，对应环境就退回默认灰黑色小字：
-
input::-webkit-input-placeholder：覆盖 Chrome 49–56、Safari 9–15.3、Opera -
input::-moz-placeholder和input:-moz-placeholder（单冒号）：分别对应 Firefox 20+ 和 18–19，缺一不可 -
input:-ms-input-placeholder：IE 10–11 唯一可用写法 -
input::placeholder：Chrome 57+ / Firefox 51+ / Safari 10.1+ / Edge 79+
别指望 PostCSS 自动加这些；*::placeholder 这种泛选器也无效，必须精确到 input::placeholder 或 textarea::placeholder。
能设的样式非常有限，设了也白设的属性要避开
::placeholder 不是真实 DOM 元素，而是渲染层的文字投影，浏览器只允许它响应部分文本类属性。设了但没效果的会被静默丢弃，DevTools 里也看不到报错：
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
color、font-size、font-family（必须显式声明，不继承父级）、opacity（Firefox 默认 0.53，常需重置为1）、text-align（对textarea有效） - ❌ 禁止：
background、padding、margin、border、display、height、width、content - ⚠️ 特别注意：
line-height: 1.4单独写无效；得塞进font简写里，比如font: 14px/1.4 "Segoe UI", sans-serif
Vue/React 中样式失效？不是框架 bug，是作用域机制在拦路
Vue 单文件组件的 <style scoped> 会给选择器自动加属性，比如 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器根本不支持带属性的选择器匹配伪元素：
- Vue 项目里必须用
:deep(input::placeholder)显式穿透 - React + CSS Modules 要用
:global(input::placeholder) - 如果父容器设置了
color: #333，::placeholder很可能被继承干扰，务必在规则里显式重写color和opacity
focus 时 placeholder 消失不干脆？靠 opacity 控制最稳
原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，得靠 CSS 强制控制透明度：
- 用
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，比color: transparent更稳妥 - 别用
display: none：部分浏览器不支持，且触发重排 - 过渡时间别超
0.2s，否则用户可能看到残留文字 -
textarea:focus::placeholder要单独写，不能和input合并
最容易被忽略的是：没写 placeholder="xxx" 属性，再全的 CSS 规则也出不来任何文字；::placeholder 只美化，不生成内容。
