How to style Webix checkbox inside data table to modify the size and color


I have a data table with checkboxes in the first column with template:"{common.checkbox()}"

I changed Webix style with the one created using Webix Skin builder an orange based one. But the common.checkbox() gave the same blue color checkbox.

How can I change common.checkbox() style? Basically I would like to change the background color and size of the checkbox.



  • Hello, @Bachu

    To solve the issue, you should create a Custom Checkbox.
    Here is the snippet:
    Please, pay attention to the 'webix_table_checkbox' class makes an arbitrary HTML element behave as a checkbox. So don't forget to add 'webix_table_checkbox' to the class attribute among other classes.
    It's also important to set checkboxRefresh:true

  • Thanks for pointing rightly to custom checkbox. It worked fine for me!

    Few observations after making the changes suggested:
    * Now all row checkboxes are styled as per my need, header master checkbox is still in blue style. How can I add template for master checkbox?
    * How can I get three state checkbox as master checkbox so that,
    -> When all row checkboxes are selected master checkbox also gets selected.
    -> When one or more row checkboxes are unselected (but not all) need to checkbox in intermediate state [-]
    -> When none of the row checkboxes selected master checkboxes goes unselected.
    Updated snippet with master checkbox:


  • @AlenaLisava I missed mentioning :smile:

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!