jQuery slide toggle checkbox can not change background color

Я пытаюсь изменить цвет фона переключателя на зеленый, когда он включен. Я думаю, что я сделал все правильно, но фон просто серый.jQuery slide toggle checkbox can not change background color

Что я делаю неправильно?

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'); 
});

Спасибо заранее.

источник

2013-06-26 Jack Barham

Ваш стиль 'background-image: -webkit-linear-gradient (внизу, # e2e2e2 0%, # e2e2e2 0.27%, # d8d8d8 100%);' переопределяет цвет фона –

одно предложение. элегантный. –

Добавить стиль

#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%); 
}

Демо: Fiddle

источник

2013-06-26 09:08:39

Спасибо, я обновил скрипку с правильным CSS –

Это не объясняет, почему вам нужно его изменить. OP спросил, что он делает неправильно ... не только, как исправить это :) – Doug

@Doug Я добавил комментарий к вопросу –

Если вы измените следующее, его работы:

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

Так в основном только background: вместо background-color:

Обновлено скрипкой : http://jsfiddle.net/84Qkz/2/

источник

2013-06-26 09:12:31 Chris

вам необходимо добавить это в свой css. Это предотвратит переопределение вы в настоящее время получаю

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

источник

2013-06-26 09:13:38

Этот CSS будет решить вашу проблему

#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; 
}

источник

2013-06-26 09:17:19 mohkhan

Вы определяете цвет .slider-button, как белый.
.slider-button Вложен внутри .slider-frame.
slider-frame дано дополнительное правило CSS, которое делает его зеленым
Зеленый цвет не отображается, потому что цвет фона элемента внутри него по-прежнему белый.

Решение ...

Изменить

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

к ...

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

Таким образом, вы теперь меняется цвет .slider-button, не .slider-frame

Fiddle me this.

источник

2013-06-26 09:17:39 Doug

Спасибо за ответ, это был фактически фон (или область слайдера), который я хотел чтобы не менять цвет кнопки. Теперь я обновил свою скрипту с правильным кодом.Еще раз спасибо. –

jQuery slide toggle checkbox can not change background color

ответ

Смежные вопросы