抱歉标题措辞过于笼统,无论如何,我有一些简单的HTML代码,如下所示:
现在,每当一个人点击输入框时,我会缩小标签的大小,如下所示: 使用以下 CSS:
现在,我的问题是,如果输入不为空并且用户离开输入框,标签将返回到正常大小。因此,我尝试了以下方法: 使用以下CSS:
<div class="block flex-1 mx-4 relative w-1/2">
<div class="form-group label-floating">
<label class="control-label">Password</label>
<input class="form-control" placeholder="" type="password">
<span class="material-input"></span>
</div>
</div>
现在,每当一个人点击输入框时,我会缩小标签的大小,如下所示: 使用以下 CSS:
&.label-floating {
&:focus-within {
& > .control-label {
top: 10px;
font-size: 11px;
line-height: 1.07143;
}
}
}
现在,我的问题是,如果输入不为空并且用户离开输入框,标签将返回到正常大小。因此,我尝试了以下方法: 使用以下CSS:
&.label-floating {
&:focus-within {
& > .control-label {
top: 10px;
font-size: 11px;
line-height: 1.07143;
}
}
& input:not(:empty){
& .control-label {
top: 10px;
font-size: 11px;
line-height: 1.07143;
}
& < .control-label {
top: 10px;
font-size: 11px;
line-height: 1.07143;
}
}
}
无济于事,所以我的问题是,有没有一种纯CSS的方法来实现我想要的效果?
编辑:有人能否编辑原始帖子以嵌入图片?
使用纯CSS更新:
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
.form-group > .control-label {
color: #888da8;
}
.form-group.label-floating:focus-within > .control-label {
top: 10px;
font-size: 11px;
line-height: 1.07143;
}
.form-group.label-floating input:not(:empty) .control-label {
top: 10px;
font-size: 11px;
line-height: 1.07143;
}