Apex Code Development You need to sign in to do that
Don't have an account?
Ricardo Coutinho 7 Replacing ui:inputCheckbox with image
Hi,
I'm trying to replace a checkbox with an image in lightening components.
I'm following the exact same code on Lightening Developer Guide but it's not working the same way, because my code hides the checkbox but doesn't replace the label for an image.
I'm following this: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ui_checkbox.htm
My checkbox on component:
My CSS:
I'm trying to replace a checkbox with an image in lightening components.
I'm following the exact same code on Lightening Developer Guide but it's not working the same way, because my code hides the checkbox but doesn't replace the label for an image.
I'm following this: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ui_checkbox.htm
My checkbox on component:
<ui:inputCheckbox value="{!v.Artigos.Publicado__c}" labelClass="check" label="Select?" click="{!c.update}"/>
My CSS:
.THIS input[type="checkbox"] {
display:none;
}
.THIS input[type="checkbox"]+label {
display: inline;
width:80px;
height:auto;
background: url('http://www.clker.com/cliparts/a/e/7/2/1314063744989836278red%20ball.png') top left;
cursor:pointer;
}
.THIS input[type="checkbox"]:checked+label {
background:url('http://www.happypinguins.nl/en/web_pictures/Green%20ball-01.png') bottom left;
width:80px;
height:auto;
cursor:pointer;
}
The result of this is: "Select?" i tried to inspect the element and there's no css associated with the label, so my first line of code it's working because the checkbox is hidden, but the other CSS it's not working, am i doing something wrong? Because i'm using the exact same code from the developer guide.