input[type=email]:valid/:invalid失效，邮箱输入框标签位置异常求助

1. 修复CSS选择器语法错误 #

你的CSS代码中，input:valid + label 和 input:invalid + label 之间缺少逗号，导致后者无法被正确识别为独立选择器，这是email输入框失去焦点后标签复位的核心原因。同时考虑到email输入框是禁用状态，新增适配禁用元素的选择器，修改后的CSS如下：

input:focus + label,
input:valid + label,
input:invalid + label,
input:disabled + label {
    color: aqua;
    font-size: 100%;
    transform: translateY(-20px);
} 

2. 修正HTML的无效属性 #

第一个文本输入框错误地添加了仅属于<label>标签的for属性，需要移除：

<input type="text" name="Sname" id="Sname" maxlength="100" required>
<label for="Sname">Lorem</label><br>

<input type="text" id="Iname" name="Iname" maxlength="100" required>
<label for="Iname">ipsum</label>
                   
<label for="CB"> <input type="checkbox" id="CB" name="CB"> <span>Lorem dolor sit amet</span> </label>
                         
<input type="email" id="EmailInput" name="EmailInput" maxlength="150" disabled required>
<label for="EmailInput" id="EmailLabel">Mail</label>

补充说明 #

• 语法修复后，input:invalid + label 会对未满足验证条件（比如空的必填email输入框）的标签应用上移样式，解决失去焦点后标签复位的问题。
• 新增input:disabled + label 是因为你的email输入框处于禁用状态，禁用元素不会触发:focus，加上这个选择器可以让禁用状态的email输入框标签保持上移效果。

内容的提问来源于stack exchange，提问作者Exit Code 1