Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    193
    Thanks
    147
    Thanked 0 Times in 0 Posts

    Changing the background color of the parent element onfocusin/onfocusout

    Hello,

    I need your help,

    How can I change the background color of my custom select box. Right now, when I click on the drop down, only the drop down sub menu changes color and not the field.

    Here is the fiddle: Edit fiddle - JSFiddle

    Code:
    $(document).ready(function(){
    var shade =	"#FFFFC4"
    var unshade	= "#FFF"
    
    
    	$(".custom-select").each(function(){
    		$(this).wrap("<span class='select-wrapper'></span>");
    		$(this).after("<span class='holder'></span>");
    	});
    	
    	$(".custom-select").change(function(){
    		var selectedOption = $(this).find(":selected").text();
    		$(this).next(".holder").text(selectedOption);
    						
    	}).trigger('change');
    	
    	
    	$(".custom-select").focusin(function(e) {
    	var eType = e.target.nodeName
    	var eID = e.target.id
    
    	this.style.backgroundColor = shade
    
    	});//end of Focusin;
    
    });
    I've attached an image of the current result and the expected outcome
    Attached Thumbnails Attached Thumbnails Changing the background color of the parent element onfocusin/onfocusout-problem.png   Changing the background color of the parent element onfocusin/onfocusout-expected.png  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,609
    Thanks
    24
    Thanked 647 Times in 646 Posts
    What browser are you using? I use FF and the blue highlight occurs naturally without jquery. and to get the backgroundColor I use CSS
    select:hover{
    background-color: red;
    }
    or do it by class or id.
    Not too sure about IE
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    I don’t get it. So, you want the select to have a light yellow background color on focus? Why not just use CSS, as sunfighter suggested (but select:focus {…})?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    The select box is transparent and the holder span is the one visible. So the CSS should be:

    Code:
    .select-wrapper select:focus + .holder {
        background: yellow;
    }
    The holder span needs to be styled so that it matches the width of the select.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •