Question

How to change the checkbox background color?

  • 7 January 2022
  • 2 replies
  • 723 views

Userlevel 3
Badge

Hello, 

 

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

 

Thanks


2 replies

Userlevel 2
Badge

Hi @gabiservidone,

There is a way using custom CSS on properties of the chechbox that are generated. Formally not supported, but easily achievable.

We would target the 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.

Userlevel 3
Badge +1

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.

Reply


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator