CODEWITHSUNDEEP
htmlcssemailselector
S.alhaider
S.alhaider

Reputation: 124

Email input is not working with valid selector

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>

Upvotes: 0

Views: 362

Answers (1)

Robert McKee
Robert McKee

Reputation: 21477

Your translateY isn't doing anything useful because transform doesn't work on inline elements, but it is being applied. Here I've also applied the color purple when it is valid, and you can see that it is working as expected. I also applied display: inline-block which will let the translateY do what I suspect you want it to do. I also changed the sibling selector to the next sibling selector so that I could re-use that style for both the email and text configurations.

input:focus+.span-name,
input:valid+.span-name {
  transform: translateY(-100%);
  color: purple;
  display: inline-block;
}
<input type="email" name="email_config" required>
<span class="span-name">Email Configuration</span>
<br>
<input type="text" name="email_config" required>
<span class="span-name">Text Configuration</span>

Upvotes: 2

Related Questions