Replace Checkbox with image

Questions
1

Greetings,

I’m trying to replace a checkbox (UI only field) with an image that will allow a user to enter more details if they click on it. The CSS that I’m using is:

.custom-checkbox input[type=checkbox]{&nbsp; &nbsp; width: 20px;<br>&nbsp; &nbsp; height: 20px;<br>&nbsp; &nbsp; background-size: 20px 20px;<br>&nbsp; &nbsp; position:relative;<br>&nbsp; &nbsp; float: right;<br>&nbsp; &nbsp; background: url('image.png<a target="_blank" rel="nofollow" href="http://f')" title="Link http//for-maccom/assets/blue-checkboxgif">')</a>;<br>}

It resizes the checkbox, but doesn’t display the image.

Any help would be appreciated.

2

Hi John

I’m just curious: were is the picture stored (static resource, external server)?
It might be that the image can’t be found and therefore doesn’t get displayed.

Cheers

3

John, to which element is the “.custom-checkbox” class applied?
In order to do this you’d need to set the image on the parent - ideally a “label” element - and hide the checkbox field. The reason I say ideally is because then it will work out of the box whereas if you use any other element you may need to run some javascript to check the box.

Here’s a sample custom renderer (inline snippet) that you can use in order to add a “label” wrapper tag:

var $ = skuid&#46;$, field = arguments[0], value = arguments[1]; skuid&#46;ui&#46;fieldRenderers[field&#46;metadata&#46;displaytype][field&#46;mode](field,value); var chk = $('input[type=checkbox]', field&#46;element); $('<label class="custom-checkbox">')&#46;append(chk)&#46;appendTo(field&#46;element);

you can then add styles similar to:

label&#46;custom-checkbox {background:#000;} &#46;nx-editor label&#46;custom-checkbox input[type=checkbox] {visibility:hidden;}
4

Putting the background image into the .custom-checkbox class and hiding the checkbox did the trick. Thanks!