核心实现原理
要实现输入框填充后标签自动上浮的效果，核心思路是利用CSS的:focus-within伪类和:not(:placeholder-shown)伪类来监听输入框的状态。当输入框处于聚焦状态，或者输入框的占位符没有显示（即用户已经输入了内容）时，触发标签的上浮动画。同时配合transition属性实现平滑的过渡效果，让标签的移动更自然。
基础HTML结构
首先需要搭建合理的HTML结构，将输入框和对应的标签放在同一个容器内部，方便通过父容器的状态来控制子元素的样式。结构如下：
<div class="input-group"> <input type="text" id="username" placeholder=" " required> <label for="username">用户名</label> </div>
这里需要注意输入框的placeholder属性要设置为空格，而不是空字符串，这样才能正确触发:not(:placeholder-shown)伪类的判断逻辑。
CSS样式编写
接下来编写对应的CSS样式，首先设置容器和输入框的基础样式，然后定义标签的初始位置和上浮后的位置，最后添加过渡效果。
/* 容器基础样式 */
.input-group {
position: relative;
margin: 30px 0;
width: 300px;
}
/* 输入框样式 */
.input-group input {
width: 100%;
padding: 12px 8px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
outline: none;
box-sizing: border-box;
}
/* 输入框聚焦时边框变色 */
.input-group input:focus {
border-color: #2196F3;
}
/* 标签初始样式 */
.input-group label {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 16px;
pointer-events: none;
transition: all 0.2s ease;
}
/* 触发上浮的条件：输入框聚焦 或 输入框有内容（占位符不显示） */
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
top: 0;
transform: translateY(-50%);
font-size: 12px;
color: #2196F3;
background: #fff;
padding: 0 4px;
}
关键属性说明
:focus-within伪类也可以替代:focus使用，当容器内的任意子元素处于聚焦状态时都会触发样式，适配性更好。:not(:placeholder-shown)用于判断输入框是否显示了占位符，当用户输入内容后占位符消失，该伪类就会匹配成功。pointer-events: none设置标签不响应鼠标事件，避免点击标签时无法触发输入框的聚焦。transition属性定义了标签位置、大小、颜色变化的过渡时间和缓动函数，让动画更平滑。
适配不同输入框类型
上述代码对文本输入框有效，对于密码框、邮箱框等其他类型的输入框，只需要修改input的type属性即可，CSS部分不需要额外调整。如果是多行文本输入框textarea，只需要把input标签换成textarea，同时调整容器的高度适配即可。
<div class="input-group"> <textarea id="intro" placeholder=" " rows="3"></textarea> <label for="intro">个人简介</label> </div>
注意事项
如果项目需要兼容旧版本浏览器，需要注意:not(:placeholder-shown)伪类在IE浏览器中不支持，这种情况下可以改用JavaScript监听输入框的input事件来添加对应的类名，实现相同的效果。
另外，当标签上浮后，为了避免遮挡输入框的边框，可以给标签添加一个白色背景，同时设置左右内边距，让视觉效果更完整。
CSS输入框标签上浮placeholdertransition修改时间：2026-07-06 02:48:22