Posts

Showing posts from March, 2021

Salesforce Checkbox Color Styling

Image
Second in the UI/UX series! Do check the first post on Tooltip here ! Checkbox is one of the complex element when it comes to styling. Although it seems very small changes but the effort in changing the style of this default lightning elements is high. Checkbox:  A checkable input that communicates if an option is true, false or indeterminate. Make This: From This: Component: You would be obviously using <lightning:input type="checkbox"> for this. Example:   <lightning:input type="checkbox" label= "Burger"/> Style: .THIS .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:after { border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; } .THIS .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux { border-color: #9e1f2a !important; background: #9e1f2a; } .THIS .slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox_fau...