无required属性的input输入后失焦浮动标签复位如何用CSS解决

你可以借助CSS的:placeholder-shown伪类实现需求，无需添加required属性，也无需引入JavaScript代码。

实现步骤 #

• 给<input>标签添加placeholder属性，值设为一个空格即可，不会展示额外的占位符内容
• 调整浮动标签的CSS匹配规则，同时覆盖「聚焦时」和「已输入内容时」两种场景

修改后代码 #

HTML代码 #

<div class="user-input-wrp">
    <br>
    <input id="name" type="text" name="name" class="inputText" placeholder=" "/>
    <span class="floating-label">Name</span>
</div>

CSS修改部分 #

仅需要调整原有浮动标签激活规则的选择器即可，其余样式无需改动：

.user-input-wrp input:focus~.floating-label,
.user-input-wrp input:not(:placeholder-shown)~.floating-label{
    top: 0px;
    left: 0px;
    font-size: 13px;
    opacity: 1;
    font-weight: lighter;
    color: #c57c49;
}

实现原理 #

:placeholder-shown伪类仅会在<input>存在placeholder属性、且用户未输入任何内容时触发匹配，反向选择器:not(:placeholder-shown)就代表用户已经输入了内容，该规则的匹配逻辑和required属性无关，刚好匹配你的需求。
该特性兼容性覆盖所有现代浏览器，可直接在生产环境使用。

内容的提问来源于stack exchange，提问作者Stacks Queue