vendredi 16 juin 2017

How do I style my ui:inputCheckbox

I would like to style my checkboxes as follows:

Checkbox styling

I am having troubles with the black bakground and the white mark in the checked state. This is the code in my lightning components:

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

Adding this to the styling makes the checkboxes black when they are not selected.

.THIS .slds-checkbox .slds-checkbox--faux{
background: black;
}

I would expect that this would work for the checked checkboxes:

.THIS .slds-checkbox .slds-checkbox--faux:checked{
background: black;
}

But is doesnt. This works for when it is active, but thats the state between checked and unchecked:

.THIS .slds-checkbox .slds-checkbox--faux:active{
background: black;
}

Does anyone have an idea how to set the background of my checked checkbox? And how to change the marker to white in the checked state?




Aucun commentaire:

Enregistrer un commentaire