[Resolved] Customize CRED Checkboxes

[Author]

Posts

[domenicoS]

Hi,

I need to customize the checknoxes style. I try in different way but nothigs works.
Can you please suggest the right way to customize the checkbox?

Now I see the defoult gray chechboxes. I'd like to display them in white background and colored when checked.

Thank you

[Nigel]

Hi Domenico

You cannot modify the styles of the checkboxes, which are determined by the browser.

You can, however, use CSS to hide the actual checkbox and display a fake checkbox of your own design in its place with the same functionality.

There are many articles and examples online about the CSS required for such a solution.

However, they typically require that a particular HTML structure for the checkboxes, namely the input followed by the label.

The normal markup generated by Toolset for checkboxes is to have the input inside the label tags, which makes a CSS solution more difficult.

However, you can add the attribute output="legacy" to your checkboxes custom field and it will render the HTML in the required format of input then label.

One such example (of many) is here: hidden link

Note that if you are adding custom CSS to your form there is an open issue for which you would need to apply the patch available here: https://toolset.com/errata/quotes-in-the-extra-css-or-js-content-will-get-backslashed/