+ Start a Discussion
GAURAV SETHGAURAV SETH 

Change color of disabled checkbox in lightning

I need to change the disabled checkbox in lightning.
Here is my code:

<td width="20">
                            <div class="slds-checkbox slds-truncate"/>
                            <aura:if isTrue="{!innerMap.Value[0]==false}">
                                <ui:inputCheckbox  aura:id="EightAM" value = "EightAM" change="{!c.selectoptionvalue}" />
                                <label class="slds-checkbox__label" for="checkbox">
                                    <span class="slds-checkbox_faux"></span>
                                    <span class="slds-form-element__label">8AM</span>
                                </label>
                                <aura:set attribute="else">
                                    <ui:inputCheckbox aura:id="checkbox1" class="dark-checkbox" value = "" disabled="true"/>
                                    <label class="slds-checkbox__label" for="checkbox">
                                        <span class="slds-checkbox_faux"></span>
                                        <span class="slds-form-element__label">   8AM    </span>
                                    </label>
                                </aura:set>
                            </aura:if>
                        </td>

Here is my css

.THIS .dark-checkbox{
    background-color: red;
}

But is not affecting.What am I missing?

Thanks,
Gaurav Seth
Best Answer chosen by GAURAV SETH
David Zhu 🔥David Zhu 🔥
You can try this:

.THIS input.uiInput--checkbox[type=checkbox][disabled]
{
    background-color: red;
}
 

All Answers

VinayVinay (Salesforce Developers) 
Hi Gaurav,

Try below.
.THIS .slds-checkbox_faux {  
background-color: red;
}
Hope above information was helpful.

Please mark as Best Answer so that it can help others in the future.

Thanks,
Vinay Kumar
Agustin BAgustin B
Hi Gaurave, check this link:
https://salesforce.stackexchange.com/questions/259976/change-backgroud-color-of-a-checkbox
Not also you can change the color of the checkbox but also the check icon.

If it helps you please mark it as correct, it may help others.
GAURAV SETHGAURAV SETH
Thanks for your responses.

<td width="20">
                            <div class="slds-checkbox slds-truncate"/>
                            <aura:if isTrue="{!innerMap.Value[0]==false}">
                                <ui:inputCheckbox  aura:id="EightAM" value = "EightAM" change="{!c.selectoptionvalue}" />
                                <label class="slds-checkbox__label" for="checkbox">
                                    <span class="slds-checkbox_faux"></span>
                                    <span class="slds-form-element__label">8AM</span>
                                </label>
                                <aura:set attribute="else">
                                    <ui:inputCheckbox aura:id="checkbox1" class="dark-checkbox" value = "" disabled="true"/>
                                    <label class="slds-checkbox__label" for="checkbox">
                                        <span class="slds-checkbox_faux"></span>
                                        <span class="slds-form-element__label">   8AM    </span>
                                    </label>
                                </aura:set>
                            </aura:if>
                        </td>

I need to change the color only when the checkbox is disabled.I added class="dark-checkbox" for that row but it is not happening.
If I use 
.THIS .slds-checkbox_faux {   background-color: red; } 
then it will change for both if and else which is not required.

Thanks,
gaurav
David Zhu 🔥David Zhu 🔥
You can try this:

.THIS input.uiInput--checkbox[type=checkbox][disabled]
{
    background-color: red;
}
 
This was selected as the best answer
GAURAV SETHGAURAV SETH
Thanks David.It worked for me.