when I set the input type to email I can't use the valid selector to it in css and when I change the type to text it works perfectly
.span-name{
display:block;
}
input:focus ~ .span-name,
input:valid ~ .span-name{
transform: translateY(-100%);
}<input type="email" name = "email_config" required ><span class = "span-name">Email Configuration</span>