::placeholder 必须为各浏览器单独写四套规则，chrome≤56等旧版不支持标准写法；仅限color、font-size等文本属性生效，background等禁用；需显式重置父级color、避免display:none、配合placeholder属性使用。
::placeholder 不能“统一”样式，必须为每个浏览器环境单独写四套规则，漏掉任意一套，对应环境里就退回默认灰黑色。
为什么只写 ::placeholder 不生效
Chrome ≤56、Firefox ≤19、IE10–11、Edge ≤18 都不认标准写法。现代浏览器（Chrome 57+ / Firefox 52+ / Safari 10.1+ / Edge 79+）才支持 ::placeholder，但你没法保证用户不用旧版。
-
input::-webkit-input-placeholder：覆盖 Chrome/Safari/Opera/旧 Edge -
input::-moz-placeholder和input:-moz-placeholder都要写——Firefox 18–19 只认单冒号，19+ 要双冒号 -
input:-ms-input-placeholder（IE10–11）和input::-ms-input-placeholder（Edge 12–18）是两套语法，缺一不可 - PostCSS 不会补全这些前缀，
*::placeholder这种泛选器无效，必须精确到input::placeholder或textarea::placeholder
::placeholder 能设哪些属性，哪些设了白搭
它不是真实 DOM 元素，浏览器只允许响应有限文本类属性。设了但没效果的属性会被静默丢弃，DevTools 里也看不到报错。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 可用：
color、font-size、font-family（必须显式声明，不继承父级）、opacity（Firefox 默认 0.53，常需重置为1）、text-align（对textarea有效） - ❌ 禁用：
background、padding、margin、border、width、height、display、visibility——设了也不渲染，还可能破坏输入框盒模型 - ⚠️ 特别注意：
line-height: 1.4单独写无效；得塞进font简写里，比如font: 14px/1.4 "Segoe UI", sans-serif
父级样式干扰导致 ::placeholder “消失”
常见现象：明明写了 color: #999，页面上还是浅灰色。大概率是父容器设置了 color: #333，而 ::placeholder 继承性极弱，又没显式重置；或者别的规则权重更高，把它盖住了。
- 务必用完整选择器链提高权重，比如
.form-control input::placeholder，而不是只写input::placeholder - 如果父级有
color，就在::placeholder里显式重写，必要时加!important（仅当真被覆盖时） - 别给
::placeholder加background：它不是画在 input 底层，而是叠在文字上，iOS Safari 下易闪烁或裁剪
聚焦时让 placeholder 立即淡出
原生行为是“空值 + 未聚焦”才显示，focus 本身不会隐藏它。想视觉上聚焦即隐，得靠 CSS 强制控制透明度。
- 用
input:focus::placeholder { opacity: 0; transition: opacity 0.15s; }，比color: transparent更稳妥 - 别用
display: none：部分浏览器不支持，且触发重排 - 过渡时间别超
0.2s，否则用户可能看到残留文字 - 对
textarea同样有效，但要单独写textarea:focus::placeholder
最常被忽略的一点：没写 placeholder="xxx"，再全的 CSS 规则也出不来任何文字。::placeholder 只美化，不生成内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
