Hello,
I would like to change the checkbox background color from blue to other. Which class should I change?
Thanks
Solved
How to change the checkbox background color?
+6Best answer by Edo Nijmeijer
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.
+5Hi
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.
+4As 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.
Edo, Front-end Engineer
1 person likes this
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Sign up
Already have an account? Login
Please use your business or academic e-mail address to register
Login to the community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.