[SalesForce] How to apply styling for a checkbox in lighting:recordform

I saw your blog on how to apply styling for a checkbox for a lightning component using CSS but I tried on a lightning:recordform but unable to change the color of background color of a checkbox. Here is my component code

CODE —

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName" access="global">

 <aura:attribute name="InputFields" type="list"/> 
 <aura:attribute name="InputTitle" type="string"/>  
 <aura:attribute name="IconName" type="string" default="utility:chevrondown"/>    
 <div class="slds-box parent">      
 <h3 class="slds-section__title  test-id__section-header-container" data-aura-rendered-by="344:1408;a">    
        <button aria-controls="toggle" id="toggle" aria-expanded="true" class="slds-button slds-section__title-action" onclick="{!c.toggle}" >
          <lightning:icon iconName="{!v.IconName}" class="slds-p-right_x-small" aura:id="swithcicon" width="100%" Height="100%" default="utility:chevrondown" size="X-small"  alternativeText="Expand"/>
              <span class="test-id__section-header-title slds-truncate" title="{!v.InputTitle}">{!v.InputTitle}</span>
        </button>
    </h3>
    <div class="slds-form parent" role="list">    
    <div class="slds-grid full forcePageBlockSectionRow">
        <div class="slds-has-flexi-truncate slds-p-horizontal_x-small full forcePageBlockItem forcePageBlockItemView">
            <div aura:id="showhidefields" class="slds-show">
                            <lightning:recordForm 
                             recordId="{!v.recordId}" 
                             objectApiName="{!v.sObjectName}" 
                             fields="{!v.InputFields}"
                             columns="2"
                             mode="readonly"/>

            </div>
        </div>
    </div>
   </div>
  </div> 
</aura:component>

CSS CODE–>

/* For checkbox background */
.THIS.parent.slds-form-element .slds-form-element__control .slds-checkbox .slds-checkbox__label .slds-checkbox--faux{
    background : yellow;
}
/* For checkbox marker color */
/*.THIS.parent.slds-form-element .slds-form-element__control .slds-checkbox .slds-checkbox__label .slds-checkbox--faux:after{
   border-color: #dcff1b;
}*/

Best Answer

.THIS .slds-checkbox [type=checkbox][disabled]+.slds-checkbox__label .slds-checkbox_faux {
        background-color: rgba(201, 199, 197, 0.96);
}

This should work. It allows you to override the checkbox default Background-color.

Related Topic