How to change background color in bootstrap switcher custom checkbox?

Question

I've customized a checkbox in Bootstrap switcher plugin (https://github.com/nostalgiaz/bootstrap-switch). How to make green color change to red on toggle? Tried this:

$( ".bootstrap-switch" ).click(function() {
    $( this ).toggleClass( "highlight" ); console.log('1111');
});

My example: http://codepen.io/rinatoptimus/pen/JEOjjp

Answer 1

You can work with the options onColor and / or offColor. First you have to define your css class this way:

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-highlight {
  background-color: red !important;
}

Then you can add the option onColor or offColor in the initialization:

$("[name='my-checkbox']").bootstrapSwitch('onColor','highlight');

I tried in your sample code, but it worked not completely. I don't know, what you changed in the standard code of bootstrap-switch.

UPDATE

For setting both onColor and offColor, you can define it this way:

$("[name='my-checkbox']").bootstrapSwitch(
'onColor':'highlight',
'offColor':'warning'
);