如何实现文本框填充内容后浮动label保持悬浮不回落？

安全阿岳

2026-10-4

浮动标签效果修复方案

核心问题点

输入框未添加required属性，:valid伪类无法正常生效，无法判断输入框是否已有内容
仅定义了输入框聚焦时的标签上浮规则，未给输入框有内容的:valid状态添加相同的上浮规则，导致失焦后标签回落
底部蓝色边框的:valid状态动画规则写错了选择器和位移方向，无法正常显示激活状态的底部边框

修复后的完整代码

HTML代码

<div class="main">
    <input class="textbox" type="text" required/>
    <label class="label-name">
        <span class="span-name">Name</span>
    </label>
</div>

CSS代码

.main{
    font-size:15px;
    position:relative;
    left:20%;
    overflow:hidden;
}
.textbox{
    height:30px;
    width:100%;
    color: grey;
    padding-top:20px;
    border: none;
    border-bottom: 1px solid black;
}
.label-name{
    position:absolute;
    bottom:0px;
    top:0px;
    padding:0px 2px 0px 2px;
    height:30px;
    width:100%;
    pointer-events:none;
}
.label-name::after{
    content:"";
    position: absolute;
    left:0px;
    bottom:-23px;
    height:30px;
    width:100%;
    border-bottom: 3px solid blue;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.span-name{
    position:absolute;
    bottom:-15px;
    transition: all 0.3s ease;
}
/* 同时适配聚焦和有内容两种状态下标签上浮 */
.textbox:focus + .label-name .span-name,
.textbox:valid + .label-name .span-name {
    transform: translateY(-150%);
    font-size: 13px;
    color: #5fa8d3;
}
.textbox:focus, .textbox:valid{
    box-shadow:none;
    outline:none;
}
/* 修正底部蓝线的触发规则和位移方向 */
.textbox:focus + .label-name::after,
.textbox:valid + .label-name::after {
    transform:translateX(0%);
}