input:invalid css rule is applied on page load

Question

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?

Answer 1

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 js:

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

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

Answer 2

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.

Answer 3

Maybe this works:

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

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