在表单交互设计中，输入框聚焦时让对应的label标签向上移动，能够清晰提示用户当前操作的目标输入框，同时避免label遮挡输入内容，是提升表单易用性的常用设计。这个效果可以通过CSS的:focus伪类结合transform属性轻松实现，不需要依赖JavaScript代码。
基础HTML结构搭建
首先需要构建输入框和label的嵌套结构，通常将input和label放在同一个容器元素内，方便通过CSS选择器实现联动。基础结构如下：
<div class="input-group"> <input type="text" id="username" placeholder=" "> <label for="username">用户名</label> </div>
这里给input添加了空格占位符，是为了避免输入框的placeholder和label内容重叠，后续可以通过CSS控制placeholder的显示时机。
初始样式设置
需要先给容器和内部元素设置基础样式，确定label的初始位置和输入框的基础样式：
.input-group {
position: relative;
width: 300px;
margin: 30px auto;
}
.input-group input {
width: 100%;
height: 40px;
padding: 10px 0 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
font-size: 14px;
box-sizing: border-box;
}
.input-group label {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
background-color: #fff;
padding: 0 4px;
}
这里的position: relative给容器设置相对定位，label使用绝对定位基于容器定位，初始位置通过top:50%和transform: translateY(-50%)垂直居中，transition属性用来添加动画过渡效果，让label移动更平滑。
实现聚焦联动效果
核心逻辑是利用:focus伪类选中处于聚焦状态的输入框，再通过相邻兄弟选择器或者后代选择器选中对应的label，修改label的transform属性实现上移：
/* 输入框聚焦时，修改label样式 */
.input-group input:focus + label {
top: 0;
transform: translateY(-50%) scale(0.9);
color: #409eff;
}
/* 输入框有内容时，也保持label上移状态，避免输入后label回落 */
.input-group input:not(:placeholder-shown) + label {
top: 0;
transform: translateY(-50%) scale(0.9);
color: #409eff;
}
这里用input:focus + label选择聚焦输入框后的相邻label元素，将top设置为0，同时调整transform的位移和缩放比例，让label移动到输入框顶部。额外添加:not(:placeholder-shown)选择器是为了处理用户输入内容后失去焦点，label依然保持上移状态，避免内容被label遮挡。
完整示例代码
将上面的代码整合后，完整的可运行示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框聚焦label上移示例</title>
<style>
.input-group {
position: relative;
width: 300px;
margin: 30px auto;
}
.input-group input {
width: 100%;
height: 40px;
padding: 10px 0 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
font-size: 14px;
box-sizing: border-box;
}
.input-group label {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
background-color: #fff;
padding: 0 4px;
}
.input-group input:focus + label {
top: 0;
transform: translateY(-50%) scale(0.9);
color: #409eff;
}
.input-group input:not(:placeholder-shown) + label {
top: 0;
transform: translateY(-50%) scale(0.9);
color: #409eff;
}
</style>
</head>
<body>
<div class="input-group">
<input type="text" id="username" placeholder=" ">
<label for="username">用户名</label>
</div>
<div class="input-group">
<input type="password" id="password" placeholder=" ">
<label for="password">密码</label>
</div>
</body>
</html>
常见问题说明
- 如果label移动后和边框重叠，可以调整label的padding值或者top的偏移量，适配不同的边框宽度。
- 如果输入框有多个，只要保证每个input和label的for、id属性对应，并且放在同一个.input-group容器内，就可以复用样式。
- 如果需要修改动画速度，可以调整transition属性里的0.3s参数，数值越大动画越慢。