Select buttons
...And the many ways they can be styled.
Last updated
...And the many ways they can be styled.
Last updated
Select button styling will be applied to the Select and Boolean questions to display choices to the responder.
There are three different types of Select buttons, all with their own style sets: Default, Checkmark, and Image.
Like other Assets, the Select buttons can be styled on a per-UI basis. Please refer to our CSS Reference guide for insight into the style properties available.
The default Select button styling with no checkmarks or images added to the button. It's just a button, and a label.
If Show checkmarks and radio buttons on choices is enabled in the Style tab of a Select question, checkmarks will populate inside the choice buttons.
Styling for checkmark Select buttons will occur in two places:
Theme -> Button -> Select -> Checkmark to style the button and the orientation of the checkmark inside it.
Theme -> Checkmarks for styling the checkmarks themselves. Single choice and Multiple choice styling will apply if "Allow multiple selection" is enabled or disabled on the Select question.
For styling checkmarks documentation (including radio), refer to the checkmarks section.
Enabling Show images on choices in the style tab of the question makes it possible to include images, videos, or GIFs on select button labels.
Once this is enabled, you can add the desired images and videos on the choice directly.
Styling options for Select buttons with images is found in Theme -> Select -> Image. Styling for the image itself will be at the bottom of that menu, under Image style.
The select choices have several options for layout presentation, including grid, vertical, horizontal, snug, space around, and space between. The layout can be defined on the Select choice directly. Vertical is enabled by default.
Since select choices are used in so many different contexts, it is possible to override aspects of select button styling on a per-question basis within the Select question itself.
With the Select question selected, open the Style tab and enable "Override default select button style".
