CSS placeholder样式如何统一设置输入框提示文字
仅仅编写 ::placeholder 通常并不足以实现兼容，原因很明确：Chrome≤56、Firefox≤19、IE10–11、Edge12–18 这类常见旧版浏览器并不支持标准写法，只识别各自对应的前缀语法。换句话说，只要少写任意一个前缀，例如 ::-webkit-input-placehold
仅仅编写 ::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）根本不识别这个标准语法。它们只能识别带浏览器前缀的 placeholder 写法，缺少任何一个，对应浏览器里就会退回默认的灰黑提示字样式。
::-webkit-input-placeholder可覆盖 Chrome、Safari、Opera 以及旧版 Edge::-moz-placeholder和:-moz-placeholder（单冒号）都必须保留，否则 Firefox 18–19 会完全失效:-ms-input-placeholder（IE10–11）与::-ms-input-placeholder（Edge 12–18）属于两种不同语法，少写任意一个都不行- PostCSS 不会自动补全这些伪元素前缀，通常需要手动书写；同时像
*::placeholder这类泛选择器也不会生效，必须精确写成input::placeholder或textarea::placeholder
::placeholder 可以设置哪些样式，哪些设置了也无效
::placeholder 并不是真正的 DOM 元素，浏览器只允许它响应部分与文本相关的 CSS 属性。某些看似正常的样式即使写上去也会被浏览器静默忽略，开发者工具中通常也不会提示错误，因此很容易在调试时反复踩坑。
- 可用属性：
color、font-size、font-family（需要显式声明，不能依赖父级继承）、opacity（Firefox 默认值通常为0.53，很多场景要重置成1）、text-align、line-height（Safari 中可能出现错位，建议谨慎使用） - 无效属性：
padding、margin、background、width、height、display、visibility——即使设置也不会被渲染，甚至可能影响输入框整体盒模型表现 - 不要给
::placeholder设置background：因为它不是绘制在 input 底层，而是叠加在提示文字层之上，尤其在 iOS Safari 下更容易出现闪烁或裁剪问题
聚焦时让 placeholder 立即消失的稳妥写法
placeholder 的原生显示逻辑是“输入框为空 + 未失效条件下显示”，而不是聚焦后自动隐藏。若希望用户一点击输入框，提示文字就立刻从视觉上消失，需要通过 CSS 主动控制透明度。
- 建议使用
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，相比直接写color: transparent更稳定，也更符合兼容性需求 - 不要使用
display: none：部分浏览器不支持该写法，而且还可能触发重排，影响输入体验 - 过渡动画时间建议不要超过
0.2s，否则用户仍可能短暂看到残留提示文字 - 对
textarea也同样适用，但需要单独补充textarea:focus::placeholder
最容易被忽视的两个前提条件
即使 CSS 规则写得再完整，如果下面这两个前提没有满足，也依然无法显示任何 placeholder 提示文字：
placeholder属性本身必须存在：例如如果没有添加placeholder="请输入"，那么伪元素本身就不会生成内容，CSS 只能负责样式美化，不能凭空创建文字- 该功能只对
和