You need to sign in to do that
Don't have an account?
GAURAV 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
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
.THIS input.uiInput--checkbox[type=checkbox][disabled]
{
background-color: red;
}
All Answers
Try below. Hope above information was helpful.
Please mark as Best Answer so that it can help others in the future.
Thanks,
Vinay Kumar
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.
<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
.THIS input.uiInput--checkbox[type=checkbox][disabled]
{
background-color: red;
}