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


Desired Styling


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:


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

  • Bah using the !important flag. There has to be a better way. Specificity should always be the preferred approach. – Adrian Larson Nov 3 '17 at 14:04
  • @Adrian Larson -> Fixed it, you forced me to not be lazy =P. – glls Nov 3 '17 at 14:14
  • Damn, I was really close using the toggle then, Didn't know about !important so, 100 times new ever day. Thanks guys – TimChadwick Nov 3 '17 at 14:34
  • @TimChadwick-> as mentioned above, try to avoid using !important, better scope your css appropriately. Dont be lazy like me, haha, I updated my post so you dont use this method – glls Nov 3 '17 at 14:37
  • In general when overriding CSS, it's helpful to use Inspect Element in-browser to see the exact rules that are giving it the property you want to change. You need to make sure the specificity of your selector is higher. In some cases scoping it with .THIS still isn't specific enough. – Charles T Nov 3 '17 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.