If you are using the WS Form framework you can use the following classes to style checkboxes. The demo below is available as a template in the ‘How To’ tab when you add a new form.
To create color options for checkboxes:
- Add a Checkbox field to your form
- Click the settings icon on the checkbox field to open the settings sidebar
- Click the ‘Advanced’ tab at the top of the sidebar
wsf-colorin the ‘Field CSS Classes’ setting.
- Click the ‘Checkboxes’ tab at the top of the sidebar
- Click the expand icon to make the data grid easier to work with
- Click the add column icon, and name the column ‘Value’
- In the ‘Label’ column, enter:
<span style="background-color: #checkbox_field_value;"></span> Colorfor each row. Change the word ‘Color’ to whatever label you would like for that row
- In the ‘Value’ column, enter the hex color you would like to use for that row, for example:
- Underneath the data grid, choose ‘Values’ in the ‘Values’ setting. Your finished checkbox data grid should look similar to this:
- Click ‘Save’ at the bottom of the settings sidebar