纯CSS实现浮动label的核心是label置于input后并用:focus+选择器联动，通过transform:translateY()上移，配合:placeholder-shown保持输入后状态，无需JS干预。
输入框聚焦后让 label 上移，核心思路是利用 :focus 伪类触发父容器或相邻元素的样式变化，再通过 transform: translateY() 实现 label 的上浮动画。关键在于 HTML 结构要支持 CSS 联动（label 在 input 之前或包裹 input），且避免 JS 干预。
结构前提：label 必须可被 input:focus 影响
纯 CSS 联动依赖选择器关系。推荐两种可靠结构：
-
label 包裹 input（最简单）：
<label><span class="label-text">用户名</span><input type="text"></label>，这样 input:focus 可以用&:focus ~ .label-text（不适用，因 span 在前）——所以更推荐下一种； -
label 在 input 之前 + 使用 + 或 ~ 选择器：HTML 顺序为
<label>用户名</label><input type="text">，然后用input:focus + label—— ❌ 不行（label 在前，无法用 + 选前面的）；✅ 正确方式是把 label 放 input 后面，写成：<input type="text" id="user"><label for="user">用户名</label>，再用input:focus + label选中紧邻的 label。
标准实现（推荐 label 在 input 后 + for/id 关联）
HTML：
<input type="text" id="username" class="input-field"> <label for="username" class="floating-label">用户名</label>
CSS：
立即学习“前端免费学习笔记（深入）”；
.input-field {
padding: 12px 8px;
border: 1px solid #ccc;
font-size: 16px;
}
.floating-label {
display: block;
margin: 0;
padding: 0;
font-size: 14px;
color: #999;
pointer-events: none; /* 防止遮挡点击 */
transition: all 0.2s ease;
transform: translateY(24px); /* 初始位置：在输入框底部对齐 */
}
.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label,
.input-field:not(:valid) + .floating-label {
transform: translateY(-10px) scale(0.85);
color: #007bff;
}说明：
-
input:focus + .floating-label：聚焦时上移 label； -
input:not(:placeholder-shown) + .floating-label：用户输入后 placeholder 消失，label 保持上移（兼容 Chrome/Firefox）； -
input:not(:valid)可配合required属性，确保有内容时才“落回”，但一般用:placeholder-shown更直观。
进阶：label 包裹 input（语义更好，无障碍更优）
HTML：
<label class="input-wrap"> <span class="label-text">邮箱</span> <input type="email" required> </label>
CSS：
立即学习“前端免费学习笔记（深入）”；
.input-wrap {
position: relative;
display: block;
}
.label-text {
position: absolute;
top: 12px;
left: 8px;
font-size: 14px;
color: #999;
transition: all 0.2s ease;
pointer-events: none;
}
.input-wrap input:focus + .label-text,
.input-wrap input:not(:placeholder-shown) + .label-text {
top: -10px;
font-size: 12px;
color: #007bff;
}
/* 注意：上面写法无效，因为 .label-text 在 input 前面，+ 选不到 */
/* ✅ 正确写法：改用 flex/absolute 布局 + input:focus 父级状态 */
.input-wrap input:focus ~ .label-text,
.input-wrap input:not(:placeholder-shown) ~ .label-text {
top: -10px;
font-size: 12px;
color: #007bff;
}⚠️ 关键：把 .label-text 放在 <input> 后面（同层），用 ~（通用兄弟选择器）即可联动。
小技巧与注意事项
- 加
pointer-events: none防止 label 盖住 input 导致失焦； - 用
transition让上移动画平滑，别漏写all或具体属性； - 初始
transform: translateY()值要和输入框内边距、行高匹配，避免错位； - 移动端需测试 touch 焦点行为，iOS Safari 对
:focus触发略保守，可加ontouchstart=""辅助（但纯 CSS 场景尽量避免）； - 若 input 有
value（如编辑页回填），需靠 JS 添加 class 或用:not(:valid)+required配合验证。
基本上就这些。不用 JS，靠结构 + 伪类 + transform 就能做出 Material Design 风格的浮动 label，关键是 label 和 input 的 DOM 顺序与选择器匹配要到位。
