When a user selects the email field in my form, the label that describes the email field moves up and shrinks in size:
https://i.sstatic.net/x2whi.png
Here is the code I am using:
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 code works as expected for input fields with type=text. However, with email input fields, the label moves back down after the user deselects the input:
https://i.sstatic.net/4jXk5.png
Can anyone suggest how I can resolve this issue? It's puzzling that it occurs with type "email" but not when it's "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>