Email input is not working with valid selector

Question

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>

Does this answer your question? [CSS transform doesn't work on inline elements](https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements) — Robert McKee, Mar 05 '20 at 21:27

Robert McKee · Answer 1 · 2020-03-05T21:45:26.107

2

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>

edited Mar 05 '20 at 21:45

answered Mar 05 '20 at 21:20

Robert McKee

21,305
1
43
57

why it won't apply try to change the display of the span-name to block and see i add it into my question but they changed it – S.alhaider Mar 05 '20 at 21:31
try using the snippet now i modified the question – S.alhaider Mar 05 '20 at 21:35
I did. It works as expected. What are you expecting it to do that it is not? – Robert McKee Mar 05 '20 at 21:35
yeah i know it works but i want when someone type in the input the value stay -100% but it is not working with email type try to change it to text and it will stay – S.alhaider Mar 05 '20 at 21:36
Because *ALL* values in input type="text" are valid, while only *some* values inside input type="email" are valid. – Robert McKee Mar 05 '20 at 21:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209115/discussion-between-s-alhaider-and-robert-mckee). – S.alhaider Mar 05 '20 at 21:37

Email input is not working with valid selector

1 Answers1