7
When I have a input
required
that has some CSS style when it is :invalid
, even before the user interacts with the input
it is already stylized as invalid. How can I avoid this?
Take the example:
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid green;
}
input {
border: 2px solid blue;
}
Esse input já começa estilizado com inválido, mesmo sem o usuário ter interagido com ele: <br>
<input type="email" required placeholder="email">
But I’d like it to just look like :invalid
after completed and invalidated by patter, or other HTML attribute, and not before the user click on it or anything.
OBS1: I would like an option with CSS only
OBS2: If the field is filled with invalid values it must continue to be stylized as invalid even after the user takes the focus from the field
I think it’s kind of complicated to do this with pure CSS. I was going to suggest the
:active
, but this would only work on inputs that are focused. `– Wallace Maxters
With angular, I usually use the class
ng-touched
orng-dirty
to identify, but I will still see if it is possible a solution– Wallace Maxters
@Wallacemaxters I tried using :Focus to see if I could, but I didn’t get the result I wanted... With React or Angular should have options even and with jQuery imagine
– hugocsl
@Alvaroalves if you go with the pseudo-class :Focus would be grateful, but if you go with the . jQuery’s Focus still prefer to expect some response with CSS, but feel free to contribute
– hugocsl
input:invalid:focus {
 border: 2px solid red;
}
&#But then when you lose Focus, you lose style– Alvaro Alves
@Alvaroalves yeah, I had tried with :Focus, but it didn’t roll :/
– hugocsl
Yeah, at first I don’t see a CSS-only output either, but I’ll do some more research. With JS it could be something like: http://jsfiddle.net/dp2zuwnk/3/, where it defines an attribute of the element that it has already suffered user interaction and can receive the style
:invalid
.– Woss
see if this helps you: https://codepen.io/alvaro-alves/pen/zJzpMG?editors=1111
– Alvaro Alves
Help? https://codepen.io/valdeir2000/pen/PdKeoz?editors=1100#0
– Valdeir Psr
@Valdeirpsr yes, 90% rss, but when I take the focus it loses the style :invalid, the field only shows that it is invalid when the guy clicks on it
– hugocsl
Yeah, I guess just CSS doesn’t roll.
– Woss