0

I am trying to set the color of my check mark. This is the code:

<div class="slds-form-element__row">
    <div class="slds-form-element">
        <label class="slds-checkbox">
            <ui:inputCheckbox aura:id="marketing" class="slds-input" value="{!v.identityRequest.Marketing__c}" change="{!c.onChange}" />
            <span class="slds-checkbox--faux"></span>
        </label>
    </div>
</div>

example

This is how it needs to look like.

Reading the documentation leaves me a bit confused, anybody an idea?

0

Try this:

<div class="slds-form-element">
    <div class="slds-form-element__control">
        <label class="slds-checkbox">
            <ui:inputCheckbox value="" />
            <span class="slds-checkbox--faux" />
            <span class="slds-form-element__label">Checkbox</span>
        </label>
    </div>
    </div>

If it works mark it as best answer!

  • please see the edit that I made to see the example of my checkbox – Ant Jun 16 '17 at 9:50
0

That is also available:

<div class="slds-form-element">
<div class="slds-form-element__control" style="padding: 100px;">
    <label class="slds-checkbox">
        <ui:inputCheckbox value="" />
        <span class="slds-checkbox--faux" />
        <span class="slds-form-element__label">Checkbox</span>
    </label>
</div>

and apply style as:

<style>
    .slds-checkbox--faux{

        background: #000!important;
    }
    .slds-checkbox [type=checkbox]:checked+.slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:checked+.slds-checkbox--faux:after, .slds-checkbox [type=checkbox]:checked~.slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:checked~.slds-checkbox--faux:after, .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox--faux:after{
        border-bottom: 2px solid rgb(255, 255, 255);
        border-left: 2px solid rgb(255, 255, 23855);
    } 
</style>

This will work for the above output you want. If that works please mark it as best answer.

  • Unfortunately this doesn't work for me. The second style (.slds-checkbox) is not accepted. I am not able to save it. because I am getting an error: '[ERROR]: Issue(s) found by CSS Parser (0Ad5E0000004VPY): Only pseudo-classes are allowed after the pseudo-element ':after''. How do I solve this? – Ant Jun 19 '17 at 7:25
  • It seems you are you trying to save it in the style section of lightning? Try saving it in the component section itself just under style tags – Nikhil Chowdhury Jun 21 '17 at 7:11
  • Did this work in the end?, I am trying something simalar Where then the checkbox is selected i want it to become red instead of the SF Blue. I have attempted css toggling within the js controller however this change will happen before the lightning css is applied and therefore overwritten. I have set to get the above method to work. – TimChadwick Nov 3 '17 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.