0

I want to change the color of my checkbox in lightning

I have the following piece of code in my cmp

 <lightning:input type="checkbox" label="P" 
                                 class="{!(v.isPVisible == true) ? 'selected' : ''}"
                                 onchange="{!c.change}"/> 

and the following in css

.THIS .selected{
    background-color: #EEE;
}

the problem here is that, I want to change the color of the checkbox, (where the tick mark comes up), not the checkbox label. By the above code , the label background color gets changed

  • have you tried other selectors? the one you are using seems to be invalid in the context fo your component – glls Apr 24 at 19:15
  • I am not sure what other selector I can use. I am not very well versed with css styling. The above code just highlights the checkbox label with the defined colour. – user55791 Apr 24 at 19:19
1

The <lightning:input type="checkbox" inherits the styling and markup from the checkbox as shown in the Lightning Design System's Checkbox Blueprint.

So you are trying to change the color of the square which is <span class="slds-checkbox_faux"></span>

Edited the answer to add the step to change the color of the tick mark as well

Changing the background color of the square:

You need to add just one more selector, .slds-checkbox_faux to the CSS class that you have already written.

.THIS .selected .slds-checkbox_faux{
background: #EEE;
}

And it will change the background color of just the square part of the checkbox. enter image description here

Changing the color of the tick mark:

You can use the :after selector for the .slds-checkbox_faux CSS class

.THIS .selected .slds-checkbox_faux:after{
border-bottom: 2px solid rgb(75, 202, 129) !important;
border-left: 2px solid rgb(75, 202, 129) !important;
}

And it will change the color of the tick mark enter image description here

I hope this helps! :)

  • The above works, I would just like to know if there is any selector attribute which can change the tick mark colour as well? – user55791 Apr 25 at 9:07
  • Yes sure, I have edited the answer and added the step to change the color of the tick mark as well. – Raghavendhra Yarlagadda Apr 25 at 9:42
0

You can try some workaround like inspecting the CSS of input element and apply the color like below:

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:attribute name="color" type="string" default=""/>
<aura:attribute name="isPVisible" type="boolean" default="true"/>
<lightning:input type="checkbox" label="P" 
                                onchange="{!c.change}"/> 
<aura:html  tag="style">
  .slds-form-element .slds-checkbox [type=checkbox]+.slds-checkbox_faux, .slds-form-element .slds-checkbox [type=checkbox]+.slds-checkbox--faux, .slds-form-element .slds-checkbox [type=checkbox]~.slds-checkbox_faux, .slds-form-element .slds-checkbox [type=checkbox]~.slds-checkbox--faux, .slds-form-element .slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox_faux, .slds-form-element .slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox--faux {
   background-color: {!v.color};
 }
</aura:html>
</aura:component>

   Controller:
change: function(component, event, helper) {
 if(component.get("v.color")){
      var clrValue='red';
      component.set('v.color',clrValue);
      console.log('color---'+component.get("v.color"));
 }

}

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.