输入框填充后标签上浮是当下非常流行的前端表单交互设计，用户输入内容或者输入框获得焦点时，原本位于输入框内的提示标签会向上浮动并缩小，既可以保留提示信息，又不会遮挡用户输入的内容，提升表单的整体美观度和使用体验。这种效果不需要依赖复杂的JavaScript逻辑，仅通过HTML和CSS就能实现，适配大多数现代浏览器。
实现原理说明
核心思路是利用<input>标签的:focus伪类和:valid伪类，结合相邻兄弟选择器+来选中对应的<label>标签，通过改变标签的位置、字体大小和颜色，实现上浮的动画效果。同时给标签添加transition属性，让样式变化过程更平滑自然。
HTML结构搭建
首先需要构建基础的表单结构，每个输入框搭配一个对应的<label>标签，两者需要放在同一个容器内部，并且<label>要紧跟在<input>的后面，方便使用相邻兄弟选择器选中。同时需要给<input>添加required属性，这样:valid伪类才能生效，判断输入框是否有内容。
<div class="form-container">
<div class="input-group">
<input type="text" id="username" required>
<label for="username">用户名</label>
</div>
<div class="input-group">
<input type="password" id="password" required>
<label for="password">密码</label>
</div>
</div>
CSS样式编写
接下来编写对应的CSS样式，首先设置输入框容器的定位，让标签可以基于容器进行绝对定位。然后设置输入框的基础样式，去掉默认的边框和轮廓，添加底部边框作为输入框的视觉标识。最后设置标签的初始位置和浮动后的样式，以及过渡动画效果。
/* 输入框容器样式 */
.input-group {
position: relative;
margin-bottom: 30px;
width: 300px;
}
/* 输入框基础样式 */
.input-group input {
width: 100%;
padding: 10px 0;
font-size: 16px;
border: none;
border-bottom: 2px solid #ccc;
outline: none;
background: transparent;
}
/* 标签初始样式 */
.input-group label {
position: absolute;
top: 10px;
left: 0;
font-size: 16px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
}
/* 输入框获得焦点或者内容有效时，标签上浮样式 */
.input-group input:focus + label,
.input-group input:valid + label {
top: -20px;
font-size: 12px;
color: #2196F3;
}
/* 输入框获得焦点时，底部边框变色 */
.input-group input:focus {
border-bottom-color: #2196F3;
}
效果优化建议
如果想要适配输入框初始就有值的场景，比如编辑表单时回填数据的情况，可以给<input>添加value属性，此时:valid伪类会直接生效，标签会默认处于上浮状态。如果需要兼容不支持:valid伪类的旧浏览器，也可以添加少量JavaScript逻辑，监听输入框的input事件，动态给容器添加对应的类名来控制标签样式。
// 兼容旧浏览器的可选逻辑
const inputs = document.querySelectorAll('.input-group input');
inputs.forEach(input => {
// 初始检查是否有值
if (input.value) {
input.parentElement.classList.add('has-value');
}
// 输入时动态检查
input.addEventListener('input', function() {
if (this.value) {
this.parentElement.classList.add('has-value');
} else {
this.parentElement.classList.remove('has-value');
}
});
});
对应的CSS需要补充.has-value label的样式，和input:valid + label的样式保持一致即可。这种实现方式代码量小，性能友好，非常适合在各类表单页面中使用。