0

Is it possible to replace ui:inputCheckbox with an image trough css. I have searched but could not find any answer. I currently have a checkbox which passes 2 values trough text and name to my javascript controller. I want to be able to do this in the form of a button. Since I cant pass 2 values with a button as a checkbox I want to visually change the checkbox with an image which looks like a button.

I found the follwing example but could not figure out why this isnt working

    <ui:inputCheckbox value="{!v.Artigos.Publicado__c}" labelClass="check" label="Select?" click="{!c.update}"/>

.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;
 }
0

I managed to replace the chechbox with an image which responds where the funtionality is checked on click. Maybe someone could perfect this by showing another image on checked.

This is what I ended up with:

 <label class="slds-checkbox">
               <label class="{!'slds-checkbox' + (v.identityRequest.Marketing__c ? ' checkbox-checked' : '')}">
                    <ui:inputCheckbox text="{!opleiding.Id}" aura:id="boxPack" value="" name="{!opleiding.Opleiding__c}" change="{!c.checkboxSelect}" class="input_class_checkbox" />
               </label>
             <img src="{!'sfsites/c' + $Resource.Inschrijven}"/>
               <span class="slds-form-element__label text"> </span>   
    </label>

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.