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