Replace Checkbox with image

  • 1
  • Problem
  • Updated 3 years ago
  • Solved

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]{    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    float: right;
    background: url('image.png');
It resizes the checkbox, but doesn't display the image.

Any help would be appreciated.
Photo of John Freese

John Freese

  • 542 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
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.

Photo of Mordechai


  • 988 Points 500 badge 2x thumb
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.$, field = arguments[0], value = arguments[1];


var chk = $('input[type=checkbox]', field.element);
$('<label class="custom-checkbox">').append(chk).appendTo(field.element);
you can then add styles similar to:
label.custom-checkbox {background:#000;}
.nx-editor label.custom-checkbox input[type=checkbox] {visibility:hidden;}
Photo of John Freese

John Freese

  • 542 Points 500 badge 2x thumb
Putting the background image into the .custom-checkbox class and hiding the checkbox did the trick. Thanks!