[SalesForce] How to overwrite the slds-checkbox_faux checked css

I am wanting to overwrite the css a toggling checkbox when checked.

.slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux_container .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox_faux, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type=checkbox]:checked~.slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked~.slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox--faux_container .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox]:checked~.slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox]:checked~.slds-checkbox_faux {
    border-color: #0070d2;
    background-color: #0070d2;

However lightning will not allow me to simply change the css files within the .css cmp, Nor does it seem to recognise the change within script tags on the cmp itself.

I have attempted to use the css class toggle function once the toggle is selected, But this is overwritten by the above lines anyway.

Ideally i want to change from:

Existing Styling

to:

Desired Styling

Best Answer

You can leverage the $A.util.toggleClass to add a CSS class when the checkbox is toggled. In order to do so, I would recommend you add an aura:id in order to find the element in your lightning controller,

<span aura:id="changeIt" class="slds-checkbox_faux"></span>

in your controller, simply find your component by id as specified in the documentation: Finding Components by ID.

In your HTML input tag, you can add an onClick Event to trigger an action, for example:

onclick="{!c.toggleClasses}"

the last part is getting the CSS to actually override the current background, by properly scoping your Css in order to have the background color change ( copied the selector path using my browsers dev tools):

.THIS #toggle-desc > span.slds-checkbox_faux.myClassOnToggle {
    background-color: red;
}

enter image description here

Adding and Removing Styles