Available CSS variables

These CSS variables are available to style the survey form. The survey form includes other variables, but if they are not mentioned in this section they are subject to change in the future and must not be used in custom CSS.

Digital In-app

VariableDescription
--typography-fontFamilyFont family for the entire survey
--typography-headline-sizeQuestion text font size
--questions-spacingVertical spacing between survey fields
--palette-core-primarySelected or focused indication, slider thumb
--palette-typography-errorError message color, such as required validation
--slider-track-active-colorTrack left side color (smaller than selected value)
--slider-track-inactive-colorTrack right side color (greater than selected value)
.surveyBtnGeneral class for every navigation button
.surveyBtn_next, .surveyBtn_back, .surveyBtn_close, .surveyBtn_submitDedicated class for each navigation button
.surveyXTo modify the close("X") button
.ratingMinLabel, .ratingMaxLabelRepresents custom scale labels for rating components

For Digital In-app the outline property is supported only by the following components:

  • Android - there is no border around the text boxes except the bottom border which is affected by another color due to its specific behavior:
    • Radio buttons items divider
    • Checkbox list items divider
  • iOS - The outline color is the border color for the text boxes and other textual components:
    • Radio buttons items divider
    • Checkbox list items divider
    • Email
    • Text input
    • Textarea
    • Dropdown (including rating dropdown)