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

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

html - Instapaper-like algorithm -

c# - How to execute a particular part of code asynchronously in a class -