jQuery slide toggle checkbox cant change background colour

Question

I am trying to change the background colour of the toggle to green when it is turned on. I think I have done everything correctly, but the background just stays grey.

What am I doing wrong?

Here is my fiddle

$('.slider-button').toggle(function(){
    $(this).addClass('on').parent().next('input[type="checkbox"]').attr('checked', 'checked');
    $('.slider-frame').addClass('green');
},function(){
    $(this).removeClass('on').parent().next('input[type="checkbox"]').removeAttr('checked');
    $('.slider-frame').removeClass('green');
});

Thanks in advance.

Answer 1

Add the style

#stage .slider-frame.green {
    background-color: #5fca42 !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    background-image: -webkit-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
}

Demo: Fiddle

Answer 2

If you change the following, its working:

#stage .slider-frame.green {
    background: #5fca42 !important;
}

So basically just background: instead of background-color:

Updated fiddle: http://jsfiddle.net/84Qkz/2/

Answer 3

you need to add this to your css. This will prevent the override you are currently getting

#stage .slider-frame.green {
    background-image:none;
}

Answer 4

This CSS will solve your problem

#stage .slider-frame.green {
    background-color: #5fca42 !important;
    background-image: -moz-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    background-image: -o-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    background-image: -webkit-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    background-image: linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
z-index:9999999;
}

Answer 5

1. You are defining the colour of .slider-button as white.
2. .slider-button is nested inside .slider-frame .
3. slider-frame is given the additional CSS rule that makes it green
4. The green isn't showing because the background colour of the element within it is still white.

Solution...

Change

#stage .slider-frame.green {....}

to...

#stage .slider-frame.green .slider-button {....}

So you are now changing the colour of .slider-button , not .slider-frame

Fiddle me this.