how do i change the styling of checkbox

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have an image on static resource and I am trying to bring that checkbox on the skuid page.

here is the css I am using to bring the checkbox. Please help.

.nx-editor input[type=checkbox] {   
    box-shadow: 0 0 0;
    font-family: Gotham A;
    width: 30px;
    height: 30px;
    margin: 0px 5px 0 0;
    vertical-align: middle;
    background: url('resource/bgCheckbox') left top no-repeat;
    background-size: 30px auto;
    cursor: pointer;
    left: -20px !important;

Photo of Pavithra


  • 520 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,840 Points 5k badge 2x thumb

The CSS you used above does not match the set of classes that Skuid uses. The best route is to inspect the elements in your browser tools and add or modify the CSS descriptors in the page.  Then take these modifications and add them to a custom CSS resource either in your page or in your theme. 

Photo of Thimo


  • 1,280 Points 1k badge 2x thumb
The thing with checkboxes is, that they look different from browser to browser. The best way to give them a custom style is to use the html-label, style that and hide the checkbox. (You can click on labels for checkboxes, so that the boxes get triggered)

For that styling, see this:

However, the problem is, that Skuid does not render a <label> for the checkboxes, but a <div> with the class nx-checkboxlabel instead.

Add the following code a Snippet, that runs on pageload to add a <label> for each checkbox.

$('.nx-checkboxlabel').each(function(idx, elem) {    checkbox = $(this).prev('.nx-checkbox');
    var theId = encodeURIComponent($(this).html());
    checkbox.attr('id', theId);
    $(this).html('<label for='+ theId + '">' + decodeURIComponent(theId) + '</label>');

After that you can use any custom label styling you want ;)