[SalesForce] Change backgroud color of a checkbox

I want to change the color of my checkbox in lightning

I have the following piece of code in my cmp

 <lightning:input type="checkbox" label="P" 
                                 class="{!(v.isPVisible == true) ? 'selected' : ''}"
                                 onchange="{!c.change}"/>

and the following in css

.THIS .selected{
    background-color: #EEE;
}

the problem here is that, I want to change the color of the checkbox, (where the tick mark comes up), not the checkbox label. By the above code , the label background color gets changed

Best Answer

The <lightning:input type="checkbox" inherits the styling and markup from the checkbox as shown in the Lightning Design System's Checkbox Blueprint.

So you are trying to change the color of the square which is <span class="slds-checkbox_faux"></span>

Edited the answer to add the step to change the color of the tick mark as well

Changing the background color of the square:

You need to add just one more selector, .slds-checkbox_faux to the CSS class that you have already written.

.THIS .selected .slds-checkbox_faux{
background: #EEE;
}

And it will change the background color of just the square part of the checkbox.

Changing the color of the tick mark:

You can use the :after selector for the .slds-checkbox_faux CSS class

.THIS .selected .slds-checkbox_faux:after{
border-bottom: 2px solid rgb(75, 202, 129) !important;
border-left: 2px solid rgb(75, 202, 129) !important;
}

And it will change the color of the tick mark

I hope this helps! :)

Related Solutions

[SalesForce] How to change color on One particular pageBlockSection

Wrapping the apex:pageBlockSection in an element that a CSS class can be added to works:

<apex:page>

<style>
.custom1 {
    background-color: red !important;
}
.custom3 {
    background-color: green !important;
}
</style>

<apex:pageBlock>
    <apex:outputPanel layout="block" styleClass="custom1">
        <apex:pageBlockSection title="Section 1">
            Content 1
        </apex:pageBlockSection>
    </apex:outputPanel>
    <apex:outputPanel layout="block">
        <apex:pageBlockSection title="Section 2">
            Content 2
        </apex:pageBlockSection>
    </apex:outputPanel>
    <apex:outputPanel layout="block" styleClass="custom3">
        <apex:pageBlockSection title="Section 3">
            Content 3
        </apex:pageBlockSection>
    </apex:outputPanel>
</apex:pageBlock>

</apex:page>

producing this output:

To style the headers you can make use of a CSS descendant selector:

<style>
.custom1 .pbSubheader {
    background-color: red !important;
}
.custom3 .pbSubheader {
    background-color: green !important;
}
</style>

where pbSubheader is a class applied by the Visualforce framework to the header.

[SalesForce] How to overwrite the slds-checkbox_faux checked css

You can leverage the $A.util.toggleClass to add a CSS class when the checkbox is toggled. In order to do so, I would recommend you add an aura:id in order to find the element in your lightning controller,

<span aura:id="changeIt" class="slds-checkbox_faux"></span>

in your controller, simply find your component by id as specified in the documentation: Finding Components by ID.

In your HTML input tag, you can add an onClick Event to trigger an action, for example:

onclick="{!c.toggleClasses}"

the last part is getting the CSS to actually override the current background, by properly scoping your Css in order to have the background color change ( copied the selector path using my browsers dev tools):

.THIS #toggle-desc > span.slds-checkbox_faux.myClassOnToggle {
    background-color: red;
}

Adding and Removing Styles

Best Answer

Related Solutions

[SalesForce] How to change color on One particular pageBlockSection

[SalesForce] How to overwrite the slds-checkbox_faux checked css

Related Topic