Input: invalid css rule applied on page load

Question

Check out these two scripts in Firefox or Chrome. In this , I have a simple form with the required attribute and a submit button. Pressing "send" when the field is empty causes its invalid style (in Firefox, this is a red outline). But he waits until you press the submit button to show that it is invalid.

Now try this one . This is identical, except that there are some css:

 input:invalid{ border-color:orange } 

With the exception of this time, the color of the orange border is applied even if you press to . So if and only if you manually set the invalid style for the form, the browser applies it earlier, which is not an intuitive behavior. Of course, the required field will be invalid before you enter anything.

Is there any way to fix this?

Answer 1

Here you are looking for: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

The style looks like this:

 form.submitted input:invalid{ border-color:orange } 

And then add this js:

 $('input[type="submit"]').click( function(){ $('form').addClass('submitted'); }); 

I do not believe that there is a way to achieve this, but without javascript.

Answer 2

In Firefox, you can use:

 :-moz-ui-invalid:not(output) 

This pseudo-class, added by the browser, gives a red glow. It is not added when the page loads, or all inputs will have this glow. I did not find the equivalent in other browsers.

Answer 3

Maybe this works:

 input:invalid{ border-color:orange !important; } 

This will overwrite any other border colors assigned to the input if this is not valid.