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
Post a Comment