Switchery custom external css coloring

Question

I have:

var check=new Switchery(elem, {
    size: 'small',
    color: '#c00',
    secondaryColor: '#b7b7b7',
    jackColor: '#fff',
    jackSecondaryColor: '#f3f3f3',
    className: 'switchery'
});

and I want all colouring parameters for the two states have to be in external css file. As expected:

.switchery {
    color: #c00;
    secondaryColor: #b7b7b7;
    jackColor: #fff;
    jackSecondaryColor: #f3f3f3;
}

didn't work. Any ideas?

Answer 1

I solve this with Jquery, all the switchery next to the checkbox is changed.

by chanhging its background color, and put color of switchery to none

>>> My fiddle Demo <<<<

elems.forEach(function(html) {
  var check=new Switchery(html, {
    size: 'small',
    color: '',    // to make it transparent, must set this 
    className: 'switchery switcherya'   // i am using custom class, but switchery is okay
    });
});

$('input[type="checkbox"]').on('click change', function(e) {
    if (this.checked) { //Checkbox has been checked
     $(this).next("span").css( "background-color", "" );   // Reset
  }
});

more documentation :

https://api.jquery.com/siblings/