html - input:invalid css rule is applied on page load -


check out these 2 fiddles in firefox or chrome. in this one, i've got simple form required attribute , submit button. pressing "submit" when box empty causes styled invalid (in firefox, it's red outline). waits until press submit show it's invalid.

now try this one. it's identical, except there's css:

input:invalid{     border-color:orange } 

except time orange border color applied before submit pressed. if , if manually set invalid style form, browser applies before, not intuitive behavior. of course required field invalid before enter anything.

is there way fix this?

here's you're looking for: http://jsfiddle.net/caseyrule/16fuhf6r/2/

style this:

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

and add js:

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

i don't believe there way achieve yet without javascript.


Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -