jquery add class to parent on input focus

css, html, jquery

Solution

You can add class instead and give the style

jQuery(document).ready(function($) {

 $(".text").focus(function(){
   $(this).parent().removeClass("round");
   $(this).parent().addClass("bluebg");

  }).blur(function(){
       $(this).parent().removeClass("bluebg");
   $(this).parent().addClass("round");
  })

});    

.bluebg {
background: none repeat scroll 0 0 #8b66ac;
color:#623886;
}

Problem

I have a contact form. I want to add class to parent div of the input box on the input:focus. Here is the fiddle . I want that not just the input box but the div background color should change to purple on the input focus. Markup: ``` <div class="round"> <div class="round_label">name</div> <input type="text" class="round_text"> </div> ``` Javascript: ``` jQuery(document).ready(function($) { $(".round_text:focus").parent().css('background', '#8b66ac'); $('.round_text:focus').parent().css('background-color', 'red'); }); ``` CSS: ``` .round { background: none repeat scroll 0 0 #F3F3F3; border-radius: 30px 30px 30px 30px; border-top: 1px solid #B2B2B2; height: 50px; padding-left: 20px; width: 440px; } .round_text:focus { background: none repeat scroll 0 0 #8b66ac; } .round_label { border-right: 1px solid #D1D1D1; color: #B6B6B6; float: left; font-size: 16px; height: 40px; padding-top: 10px; width: 156px; } .round_text { background: none repeat scroll 0 0 #F3F3F3; border: medium none; color: #424242; float: left; height: 50px; width: 240px; } ``` Also, Can you help me as if i need to add two properties eg: ``` $(".round_text").focus(function(){ $(this).parent().css('background', '#8b66ac','color','#fff'); }).blur(function(){ $(this).parent().css('background', /*color*/); }) ```

Original source