How to change the checkbox background color?

Question

Hello,  I would like to change the checkbox background color from blue to other. Which class should I change? Thanks

Edo Nijmeijer · Accepted Answer

As you may have noticed from the example project, styling checkboxes is a pretty convoluted thing. This was necessary to support the old browser that WebUI used to support before. And, in current times, when you want to have custom checkboxes on most Apple devices.

But if you don’t care for old browsers (and you shouldn’t since WebUI stopped supporting old IE11 and old Edge over a year ago), AND if you’re not on any mobile platforms, then you could also just have these three lines in a custom stylesheet:

input.boolean-cell-editor-contents {
  accent-color: red;
}

That would also get you a red background for checked checkboxes, in browsers like Chrome 93+

Perhaps you’d find that sufficient too.

Madhu Krishnappa · Answer

Hi @gabiservidone,There is a way using customCSSon properties of the chechbox that are generated. Formally not supported, but easily achievable.We would targetthe properties of the input checkbox and its span element to change the background colour.Attached is an example model with its Custom CSS, through which I could get Red colored checkboxes.Hope this works for you.Please let me know if you have any questions.Thanks,WebUI Team.

How to change the checkbox background color?

2 replies

1 Attachment

Reply

1 Attachment

Reply

Sign up

Login to the community

Scanning file for viruses.

This file cannot be downloaded