Search code examples
jqueryparent-childparentcss

jQuery CSS Style a parent div when child is focused

I have a script like this: (but it's not working)

$('div#selectbox select:focus').parent().css('box-shadow','0 0 4px 1px #5099E2');

When the user focuses on a select that's parent is div#selectbox I want to change the box-shadow of the div any suggestions?

Here is a jsFiddle of what I'm doing... http://jsfiddle.net/2BydK/

Solution

  • It seems like the code will do a good job of finding a focussed select element, but there is nothing to trigger it. Perhaps try this:

    $('div#selectbox select').focus(function(){
    $(this).parent().css('box-shadow','0 0 4px 1px #5099E2');
});

$('div#selectbox select').blur(function(){
    $(this).parent().css('box-shadow','none');
});

    If you wanted to add an check in there, you could always put in a if($(this).is(":focus")){} just to be sure. Hope that helps...