Salesforce Checkbox Color Styling

By -

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_faux{
    border-color: #9e1f2a;
    box-shadow: 0 0 3px #9e1f2a;
}



Hope this helps you...Enjoy..!


Comments

Post a Comment

Popular posts from this blog

Salesforce Integration with Foreign Exchange Rates API for Currency Conversion

By -
Image
This blog is to create an Apex code that Integrates Salesforce with an external Exchange Rates API. This Apex code converts USD to INR. The base currency in this API is Euro, so we have to convert the Dollars to Euro and then to Indian Rupees. Exchange rates API is a free service for current and historical foreign exchange rates published by the European Central Bank. Exchange Rates API We will be using the HTTP request and response functionality. Http Class : Use this class to initiate an HTTP request and response. HttpRequest Class : Use this class to programmatically create HTTP requests like GET, POST, PUT, and DELETE. HttpResponse Class : Use this class to handle the HTTP response returned by HTTP. Step 1 ==> Connect Register the endpoint URL Before your Apex code can call the exchangeratesapi endpoint, you must register the endpoint URL in the Remote Site Settings page. 1) Log in to Salesforce. 2) From Setup, enter Remote Site in the Quick Find box, then select Remote Sit...
Explore more »

Administrator Certification Maintenance (Spring '21) Questions

By -
Image
  If you hold the Salesforce Administrator credential, keep in mind that you need to complete this module by the due date to maintain your certification. Another important part of maintaining your credential is ensuring your Trailhead and Webassessor accounts are linked . Below are the answers to Administrator Certification Maintenance (Spring '21) Questions. Please go to the Administrator Certification Maintenance (Spring '21) for correct preparation path and some hands-on practice. Oops! There are no Questions for this Maintenance(Badge). Please prepare properly and complete the hands on challenge 😊😊 Thanks...Enjoy..!
Explore more »

Salesforce App Builder - Question Set 5

By -
Image
These Salesforce AppBuilder Certification Questions are only for practice, please go to the  Salesforce AppBuilder Certification  for correct preparation path and some hands-on practice. 1. Which statement is true when defining a Create custom action for the Contact object?  Choose 2 answers A. The create action will ignore field requirements. B. The create action can pre-define Contact field values. C. The create action allows a user to select a record type. D. The create action will respect validation rules. 2. Universal Containers conduct evaluations of their sales reps using a custom object consisting of numerical scores and executive comments. The company wants to ensure that only the sales reps and their manager’s executive can view the rep’s evaluation record but the reps should not be able to view the executive comment field on their review. How can these requirements be met? A. Use a private sharing model granting record access using hierarchy; manage field ...
Explore more »