jquery - Setting the background colour or a div failing when inside a fieldset -
i'm hoping here can me out, i'm relatively new css , jquery, can't seem wrap head around i'm doing wrong in case.
i've got form, labels, inputs , selects. found helpful tutorial showing me how add background colour parent div when entered input or select, removed when moved on. tutorial here, http://css-tricks.com/improved-current-field-highlighting-in-forms/
the css using simple:
.curfocus {background-color: #fdecb2}
when used simple jquery worked wonderfully.
$("input").focus(function() { $(this).parent().addclass("curfocus"); }); $("input").blur(function() { $(this).parent().removeclass("curfocus") });
however, placed labels , inputs inside fieldset, , now, css no longer gets enabled.
this example works:
<div class="row"> <label for="username">your name:</label> <input type="text" name="username" id="username"/> </div>
this example not work:
<fieldset class="align"> <div class="row"> <label for="username">your name:</label> <input type="text" name="username" id="username"/> </div> </fieldset>
my css page this:
.align { border: none; border-width: 0px; margin: 0px; padding: 0px; padding-top: 1px; } .align label { float: left; width: 45%; padding-top: 0.6em; padding-left: 1em; margin-right: 0.5em; } .align input { float: left; width: 45%; } .align select { float: left; width: 46%; }
does know how can re-enable active field highlighting once more?
i think doesn't work because div's block elements, , floating input/label elements within it. because of these floats, div doesn't have height. try adding css-file:
.align div { overflow: hidden; }
might solve it?
edit more info on clearing floats, check this site of ppk
Comments
Post a Comment