CSS::placeholder如何统一输入提示文字样式

只写::placeholder没效果，因为Chrome≤56、Firefox≤19、IE10–11、Edge12–18等主流旧版浏览器不支持标准写法，仅识别带前缀版本；漏任一前缀（如::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder、:-ms-input-placeholder）即在对应环境退为默认灰黑小字。

只写 ::placeholder 为什么没效果

因为绝大多数还在用的浏览器（Chrome ≤56、Firefox ≤19、IE10–11、Edge 12–18）根本不认这个标准写法。它们只认带前缀的版本，漏掉任意一个，对应环境里就退回默认灰黑色小字。

1. ::-webkit-input-placeholder 覆盖 Chrome/Safari/Opera/旧 Edge
2. ::-moz-placeholder 和 :-moz-placeholder（单冒号）都要写，否则 Firefox 18–19 完全不生效
3. :-ms-input-placeholder（IE10–11）和 ::-ms-input-placeholder（Edge 12–18）是两套语法，缺一不可
4. PostCSS 不会自动补全这些伪元素前缀，必须手写；泛选器如 *::placeholder 无效，得精确到 input::placeholder 或 textarea::placeholder

::placeholder 能设哪些样式，哪些设了白费

::placeholder 不是真实 DOM 元素，浏览器只允许它响应有限文本类属性。设了但没效果的属性会被静默丢弃，DevTools 里也看不到报错，容易反复调试却找不到原因。

1. 能用：color、font-size、font-family（必须显式声明，不继承父级）、opacity（Firefox 默认 0.53，常需重置为 1）、text-align、line-height（Safari 易错位，慎用）
2. 不能用：padding、margin、background、width、height、display、visibility——设了也没渲染，还可能破坏输入框盒模型
3. 别给 ::placeholder 加 background：它不是画在 input 底层，而是叠在文字上，iOS Safari 下易闪烁或裁剪

聚焦时让 placeholder 立即消失的稳妥写法

原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，得靠 CSS 强制控制透明度。

1. 用 input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，比 color: transparent 更稳妥
2. 别用 display: none：部分浏览器不支持，且触发重排
3. 过渡时间别超 0.2s，否则用户可能看到残留文字
4. 对 textarea 同样有效，但要单独写 textarea:focus::placeholder

最容易被忽略的两个前提

再全的 CSS 规则也出不来任何文字，如果这两个前提没满足：

1. placeholder 属性本身没写：比如 <input> 没加 placeholder="请输入"，伪元素不生成内容，只美化
2. 只对 <input> 和 <textarea> 有效，不支持 <select>、<button>、<div> 等元素；Vue/React 封装组件里，必须把 placeholder prop 透传到原生 <input> 上