Check out these two fiddles in Firefox or Chrome. In this one, I've got just a simple form with a required attribute and a submit button. Pressing "submit" when the box is empty causes it to be styled as invalid (in Firefox, it's a red outline). But it waits until you press submit to show that it's invalid.

Now try this one. It's identical, except that there's some css:

input:invalid{
    border-color:orange
}

Except this time the orange border color is applied even before submit is pressed. So if and only if you manually set an invalid style for a form, the browser applies it before, which is not intuitive behavior. Of course a required field will invalid before you enter anything.

Is there a way to fix this?

Check out these two fiddles in Firefox or Chrome. In this one, I've got just a simple form with a required attribute and a submit button. Pressing "submit" when the box is empty causes it to be styled as invalid (in Firefox, it's a red outline). But it waits until you press submit to show that it's invalid.

Now try this one. It's identical, except that there's some css:

input:invalid{
    border-color:orange
}

Except this time the orange border color is applied even before submit is pressed. So if and only if you manually set an invalid style for a form, the browser applies it before, which is not intuitive behavior. Of course a required field will invalid before you enter anything.

Is there a way to fix this?

• javascript
• html
• css
• validation

• According to the MDN Docs for the :invalid pseudo class, it appears that it is working like the spec outlines it to work. – War10ck Commented Nov 19, 2014 at 16:27

5 Answers 5

There is a good article HERE about how to prevent :invalid styles from activating on page load (as well as other css tricks). The technique requires a Placeholder attribute, but other than that, it's a pure css solution.

input:not(:placeholder-shown):not(:focus):invalid {
    border-color:orange;
}

Here's what you're looking for: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

Style it like this:

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

And then add this JavaScript (I'm using jQuery here):

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

I don't believe there is a way to achieve this yet without JavaScript.

It's been ages but I couldn't find any solution in my quick search that didn't required JS or something overcomplicated. But it's as simple as using this instead:

input:user-invalid {
 border-color:orange;
}

PS: For anyone in the future needing this. It's never too late to help anyone.

In Firefox you can use:

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

This the pseudo class added by the browser to give the red glow. It's not added at page load or all the inputs would have this glow. I've not found the equivalent in other browsers.

Maybe this works:

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

This will overwrite any other border colours assigned to the input when it's invalid.