henryaaron henryaaron - 20 days ago 7
jQuery Question

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/

Answer

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...