Restyling a Single-Option Checkbox

Follow

For certain uses a single Check Box is ideal but does not fit stylistically. Using both the label and the selection list option when there is only a single choice may be redundant when the checkbox itself is understood from context by users. Hiding the label or selection list simplifies this but neither is visually consistent with the multiple selection Check Box control as can be see in the following image:

The addition of CSS to your template can easily give you a simplified single select checkbox:

  1. Hide the Check Box control label. You may also want to set the label alignment of the section or responsive column to be above the control.
  2. Set the selection option as desired.
  3. Under the Properties > HTML Attributes > Add Class button of the control add the class name "singleCheckBox".
  4. In your CSS customizations file add the following code:

.singleCheckBox .checkbox-block {
font-weight: bold;
}

Follow steps 1 - 3 for any single Check Box control you wish to appear this way. For frequent use, you could even make a coach view wrapper for the Check Box control specifically designed around this appearance option.

Have more questions? Submit a request

Comments

Powered by Zendesk