CSS动画登录表单email类型输入标签动画异常求助

问题场景 #

我用纯CSS实现了带动画的登录表单，预期输入框获焦或填充内容后，标签会动画移动到顶部。目前text类型输入框表现正常，但email类型输入框出现异常：只有输入符合格式的邮箱（如带@gmail的完整地址）时，动画才正常工作；若输入随机内容，标签会回落至输入框中，与内容重叠。

核心问题代码 #

控制标签动画的CSS片段：

.register-txt_field input:focus ~ label,
.register-txt_field input:valid ~ label{
  top: -5px;
  color: var(--violet);
}

问题原因 #

问题出在:valid伪类的行为差异：

• 对于带required属性的text/password输入框，只要非空就满足:valid；
• 但email类型输入框的:valid仅在内容严格符合邮箱格式时触发。当输入无效内容时，:valid不生效，失去焦点后标签会回到初始位置，导致重叠。

解决方案 #

改用:not(:placeholder-shown)替代:valid，只要输入框有内容（无论格式是否正确），就保持标签上移状态，步骤如下：

1. 修改CSS选择器 #

替换原有的:valid为:not(:placeholder-shown)：

.register-txt_field input:focus ~ label,
.register-txt_field input:not(:placeholder-shown) ~ label{
  top: -5px;
  color: var(--violet);
}
.register-txt_field input:focus ~ span::before,
.register-txt_field input:not(:placeholder-shown) ~ span::before{
  width: 100%;
}

2. 给输入框添加空占位符 #

在所有输入框中添加placeholder=""属性（:placeholder-shown通过检测占位符是否显示来判断输入框是否为空）：

<div class="register-txt_field">
  <input type="text" required placeholder="" />
  <span></span>
  <label>Name</label>
</div>
<div class="register-txt_field">
  <input type="email" required placeholder="" />
  <span></span>
  <label>Email</label>
</div>
<div class="register-txt_field">
  <input type="password" required placeholder="" />
  <span></span>
  <label>Password</label>
</div>

效果说明 #

修改后，无论输入框类型是什么，只要用户输入了内容（哪怕是无效格式的邮箱），标签都会保持在顶部；仅当输入框为空时，标签才会回到输入框内，完全符合预期交互。

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