input[type="email"]:valid and input[type="email"]:invalid aren't working-CodePudding

When an email field in my form is selected, the label that describes the email field moves up and gets smaller:

My code looks like this:

input:focus   label,
input:valid   label /*Is supposed to leave the label over the text even if the input isn't valid*/ 
input:invalid   label{
    color: aqua;
    font-size: 100%;
    transform: translateY(-20px);
}

This works perfectly fine on input fields with type=text, but on email input fields, the label moves down after the input field is deselected:

Does anybody have an idea how I can fix this? I find it quite confusing that it happens if its type is "email", but not if it is "text"

<input type="text" for="Sname" 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>

CodePudding user response：

I don't know exactly why, but the solution was the following:

input[type="text"]:focus   label, 
input[type="text"]:valid   label,
input[type="email"]:focus   label, 
input[type="email"]:valid   label, 
input[type="email"]:invalid   label {
    color: aqua;
    font-size: 100%;
    transform: translateY(-20px);
}

I think input[type="text"] seemed to be confused if you would write input:invalid label {...}, probably because there is no invalid input in a text field.

Therefore, I specified the selection