:placeholder-shown用于检测输入框为空且原生placeholder可见的状态，需配合input的placeholder属性（如空格）使用；结合~兄弟选择器联动label实现浮动效果，并用transform动画替代top以保障性能。

用 :placeholder-shown 判断占位符是否显示

浏览器原生 placeholder 无法直接做上移动画，必须把它“藏起来”，再用 <label></label> 模拟浮动标题。关键在于识别“占位符正在显示”这个状态——:placeholder-shown 就是为此设计的伪类，它只在输入框为空且 placeholder 可见时匹配。

注意：:placeholder-shown 要求 input 必须有 placeholder 属性（哪怕值是空格 " "），否则选择器不生效。别写成 input:placeholder-shown（漏了冒号前的冒号），正确写法是 input:placeholder-shown。

• ✅ 正确结构：<input placeholder=" "><label>用户名</label>
• ❌ 错误写法：input:placeholder-shown::placeholder（语法无效）
• ⚠️ 兼容性：Chrome 47+、Firefox 51+、Safari 11.1+ 支持；IE 完全不支持，需 JS fallback

用 ~ 通用兄弟选择器联动 label

label 必须和 input 在同一父容器内，且 DOM 顺序在 input 之后，才能用 ~ 选中它。如果 label 在 input 前面，CSS 无法反向选择。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

常见错误是把 label 包在 input 里，或用 + 相邻选择器但中间插了其他元素（比如图标 <span></span>），导致样式失效。

• ✅ 推荐 HTML：<div class="form-group"> <input><label></label> </div>
• ✅ CSS 触发规则：input:not(:placeholder-shown) ~ label, input:focus ~ label
• ⚠️ input:focus + label 只在 label 紧跟 input 时有效；~ 更宽松，推荐优先用

让 label 上浮的关键 transform 和定位

label 默认要绝对定位在输入框内部，初始位置靠 top 和 transform: translateY() 微调对齐。上浮动画本质是改变 transform 的 scale() 和 translate() 组合值，不能只改 top —— 因为 top 不是可动画的合成属性，会触发重排，卡顿明显。

• ✅ 初始态：position: absolute; top: 50%; transform: translateY(-50%) scale(1);
• ✅ 上浮态：transform: scale(0.75) translate(-2px, -28px);
• ⚠️ 必须加 transition: transform 0.2s ease，且声明在非伪类规则里（比如 .form-group label），否则动画不生效
• ⚠️ pointer-events: none 一定要加，否则 label 会遮挡 input 的点击区域

隐藏原生 placeholder 避免视觉冲突

如果不处理，原生 placeholder 文字会和上浮的 label 重叠。最稳妥的方式是让它透明，而不是用 display: none（后者可能影响可访问性）。

• ✅ 正确隐藏：input:placeholder-shown::placeholder { color: transparent; }
• ⚠️ 注意各浏览器前缀：虽然现代浏览器已支持无前缀写法，但若需兼容旧版 Safari 或 Firefox，仍需补 ::-webkit-input-placeholder 等
• ⚠️ 别写 input::placeholder { display: none } —— 这会导致 placeholder 完全不可见，且部分屏幕阅读器可能读不出提示文本

实际效果是否平滑，取决于 transform 是否走 GPU 加速，以及父容器有没有意外创建层叠上下文（比如 opacity 或 <code>filter）。如果动画卡顿，先检查这些隐性干扰项。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！