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 should work. It allows you to override the checkbox default
Background-color.