对于通用的标题很抱歉,无论如何,我有一些简单的HTML,如下所示:
<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实现我想要的东西?
编辑:请有人请编辑OP以嵌入图片。
更新了纯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;
}
您无法在不检查内容是否有效的情况下定位包含值的输入。但是,您可以使用循环方式检查输入是否没有值。
您的输入具有placeholder
属性。 CSS选择器:placeholder-shown
将定位显示占位符的输入;也就是说,指定了占位符属性且不为空的输入。
因此,您必须设置空输入标签的样式。
.form-control:placeholder-shown ~ .control-label {
font-size: 20px;
color: red;
}
.label-floating:focus-within > .control-label,
.form-control ~ .control-label {
font-size: 11px;
color: blue;
}
<div class="form-group label-floating">
<input class="form-control" placeholder="" type="password">
<label class="control-label">Password</label>
</div>
请注意,:placeholder-shown
未在IE / Edge中实现,尽管是highly requested;但是,有polyfills可用。