Chrome/Firefox/Safari中::placeholder写法不同：Chrome/Safari旧版需::-webkit-input-placeholder，Firefox 18–50用::-moz-placeholder（单冒号），IE10–11用::-ms-input-placeholder，现代标准为::placeholder且须放最后；透明度需显式设opacity:1防发虚，input[type="date/number"]原生不支持placeholder样式。
Chrome/Firefox/Safari 中 ::placeholder 的写法差异
现代浏览器基本都支持 ::placeholder，但老版本（如 Chrome 56 之前）只认 ::-webkit-input-placeholder，Firefox 18–50 要用 ::-moz-placeholder（注意是单冒号），Safari 有时对 ::placeholder 渲染不稳定。实际项目中建议按顺序写全，让浏览器自己选择生效的规则。
常见错误是只写 ::placeholder，结果在旧版 Edge 或某些安卓 WebView 里完全不生效。
-
::-webkit-input-placeholder— Chrome、Safari、新版 Edge -
::-moz-placeholder— Firefox 18–50（单冒号，且会覆盖透明度） -
::-ms-input-placeholder— IE10–11、旧版 Edge -
::placeholder— 标准写法，优先放在最后
设置颜色时为什么文字变淡或消失？
因为 ::-moz-placeholder 默认带 opacity: 0.54，直接设 color 不会覆盖它；而 ::placeholder 在部分 Safari 版本中会继承父级 opacity，导致颜色发虚。必须显式重置 opacity: 1 才能确保颜色准确显示。
实操建议：
- 所有 placeholder 规则里统一加
opacity: 1 - 避免在 input 父容器上设
opacity，改用background-color或rgba()控制半透 - 颜色值别用简写
#999，改用#999999或rgb(153, 153, 153)，防止某些 WebView 解析异常
input[type="date"] 和 input[type="number"] 的 placeholder 不生效？
这两类原生控件在多数浏览器中压根不渲染 placeholder 文本——不是 CSS 没写对，而是浏览器根本不支持。Chrome 对 type="date" 完全忽略 ::placeholder，iOS Safari 甚至不触发伪元素匹配。
可行方案只有两个：
- 换用普通
input[type="text"]+ JS 校验和格式化（比如用pattern和inputmode="numeric"辅助） - 用 label 或外部文案模拟 placeholder 效果，配合
:focus和:not(:placeholder-shown)控制显隐
强行套 ::placeholder 在这类 input 上，只会浪费调试时间。
用 :not(:placeholder-shown) 做条件样式是否可靠？
这个伪类能判断 input 是否有值（包括空格），比监听 input 事件更轻量，但兼容性有限：IE 全系不支持，iOS Safari 12.2 以下也不行。而且它只对带 placeholder 属性的 input 有效，如果属性动态移除，状态不会更新。
典型误用：
input:not(:placeholder-shown) + label {
transform: translateY(-16px);
}
这段代码在 iOS 11 上静默失效，用户输入后 label 还卡在原位。上线前务必在真机测一遍目标系统版本。
复杂点在于：placeholder 颜色、显隐逻辑、表单验证状态三者经常耦合，但浏览器对它们的渲染时机并不一致——比如 Firefox 可能在 focus 后才触发 :placeholder-shown 计算，而 Chrome 是实时的。这种差异容易被忽略，直到用户反馈“点进去字才变色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
