How to prevent an Input Required from starting with the CSS style :invalid

Asked

Viewed 570 times

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

html css html5 css3 input

  • 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. `

  • With angular, I usually use the class ng-touched or ng-dirty to identify, but I will still see if it is possible a solution

  • @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

  • @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

  • input:invalid:focus {&#xA; border: 2px solid red;&#xA;}&#But then when you lose Focus, you lose style

  • @Alvaroalves yeah, I had tried with :Focus, but it didn’t roll :/

  • 1

    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.

  • see if this helps you: https://codepen.io/alvaro-alves/pen/zJzpMG?editors=1111

  • Help? https://codepen.io/valdeir2000/pen/PdKeoz?editors=1100#0

  • @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

  • Yeah, I guess just CSS doesn’t roll.

Show 6 more comments

1 answer

4

First of all this is not a definitive answer, it does not work on Microsoft browsers... for a change...

Now let’s get down to business.

What happens here is that the input must have a value of placeholder, and when he doesn’t have the placeholder is why the user wrote something inside the input correct. But how to check whether the input is or is not with the placeholder? That’s where this CSS rule comes in :not(:placeholder-shown).

That is if it has any value in the input he won’t have the placeholder, and if that value is invalid it stylizes the input with the :invalid. Thus input:not(:placeholder-shown):invalid

Note that now the input has 3 different states and 3 different styles. Blue when :focus, Red when :invalid and Green when :valid

input {
  width: 100px;
}
input:focus {
  border: 2px solid #0050e6;
}
input:required:valid {
  border: 2px solid #009900;
}
input:required:not(:placeholder-shown):invalid  {
  border: 2px solid #c9001b;
}
<input type="email" placeholder="email" required name="" id="">
<input type="email" autofocus placeholder="email" required name="" id="">
<input type="email" value="123" placeholder="email" required name="" id="">
<input type="email" value="[email protected]" placeholder="email" required name="" id="">
<input type="email" placeholder="sem required sem validação" name="" id="">

OBS1: See your browser support for the pseudo-class :placeholder-shown: https://caniuse.com/#feat=css-placeholder-Shown

OBS:2 The Mozilla documentation on :placeholder-shown can be seen here: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-Shown

Browser other questions tagged html css html5 css3 input

You are not signed in. Login or sign up in order to post.