纯CSS实现浮动label的核心是label置于input后并用:focus+选择器联动，通过transform:translateY()上移，配合:placeholder-shown保持输入后状态，无需JS干预。
输入框聚焦后让 label 上移，核心思路是利用
伪类触发父容器或相邻元素的样式变化，再通过
实现 label 的上浮动画。关键在于 HTML 结构要支持 CSS 联动（label 在 input 之前或包裹 input），且避免 JS 干预。
结构前提：label 必须可被 input:focus 影响
纯 CSS 联动依赖选择器关系。推荐两种可靠结构：
label 包裹 input
（最简单）：
，这样 input:focus 可以用
（不适用，因 span 在前）——所以更推荐下一种；
label 在 input 之前 + 使用 + 或 ~ 选择器
：HTML 顺序为
，然后用
—— ❌ 不行（label 在前，无法用 + 选前面的）；✅ 正确方式是把
label 放 input 后面
，写成：
，再用
选中紧邻的 label。
标准实现（推荐 label 在 input 后 + for/id 关联）
HTML：
CSS：
立即学习
“
前端免费学习笔记（深入）
”；
说明：
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
：聚焦时上移 label；
：用户输入后 placeholder 消失，label 保持上移（兼容 Chrome/Firefox）；
可配合
属性，确保有内容时才“落回”，但一般用
更直观。
进阶：label 包裹 input（语义更好，无障碍更优）
HTML：
CSS：
立即学习
“
前端免费学习笔记（深入）
”；
⚠️ 关键：把
放在
后面（同层），用
（通用兄弟选择器）即可联动。
小技巧与注意事项
加
防止 label 盖住 input 导致失焦；
用
让上移动画平滑，别漏写
或具体属性；
初始
值要和输入框内边距、行高匹配，避免错位；
移动端需测试 touch 焦点行为，iOS Safari 对
触发略保守，可加
辅助（但纯 CSS 场景尽量避免）；
若 input 有
（如编辑页回填），需靠 JS 添加 class 或用
+
配合验证。
基本上就这些。不用 JS，靠结构 + 伪类 + transform 就能做出 Material Design 风格的浮动 label，关键是 label 和 input 的 DOM 顺序与选择器匹配要到位。
:focustransform: translateY()&:focus ~ .label-textinput:focus + labelinput:focus + label
.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-labelinput:not(:placeholder-shown) + .floating-labelinput:not(:valid)required:placeholder-shown.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~pointer-events: nonetransitionalltransform: translateY():focusontouchstart=""value:not(:valid)required