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:
to:
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,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:
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):
Adding and Removing Styles