Available CSS variables

This section lists all the CSS variables that can be overridden in the new survey form.

Though there are other variables, if they are not mentioned in this section they might be subject to change in the future and must not be used in custom CSS.

Digital Web

:root {
--typography-fontFamily:  /* Font family for the entire survey */
    --typography-headline-size:  /* Question text font size */
    --typography-subHeadline-size:  /* Description text font size */
    --typography-body-size:  /* Font size of all other elements - labels, placeholder text, dropdown/radio options - on the survey */
    --palette-core-components:  /* Component background color */
    --palette-core-outline:  /* Component outline color */
    --palette-typography-body:  /* Font color of all text components excluding the question text */
    --palette-typography-headline:  /* Font color of question text */
    --palette-typography-subHeadline:  /*Font color of description text */
    --palette-typography-error:  /* Error message color, such as required validation */
    --palette-typography-placeholder:  /* Font color of placeholder */
    --palette-typography-poweredby:  /*Font color of Powered by Medallia */
    --palette-typography-user-input:  /* Font color of user input */
    --palette-typography-link:  /* Font color of url links */
    --palette-group-inner-mark:  /* Fill color for group component- checkbox or radio */
    --palette-group-mark-background:  /* mark color for group component- checkbox or radio */
    --palette-rating-custom-outline:  /* Rating component stars outline color - hover state */
    --palette-rating-custom-selected-outline:  /* Rating component stars outline color - selected state */
    --palette-rating-number-hover:  /* Rating component outline color - hover state */
    --palette-rating-number-selected:  /* Rating component fill color - selected state */
    --palette-rating-number-text-hover:  /* Rating component font color - hover state */
    --palette-rating-number-text-selected:  /* Rating component font color - selected state */
    --palette-rating-number-text-selected-hover:  /* Rating component font color - selected state when hovering */
    --palette-rating-number-text:  /* Rating component font color */
.surveyBtn /* general class for every navigation button */
.surveyBtn_next, .surveyBtn_back, .surveyBtn_close, .surveyBtn_submit /* dedicated class for each navigation button */
.surveyX /*Modifying the close("X") button*/
.mobile form /* represent mobile web survey element */
.ratingMinLabel, .ratingMaxLabel /* represents custom scale labels for rating components*/

Digital In-app

:root {
--typography-fontFamily /* Font family for the entire survey */
--typography-headline-size /* Question label font size */
	--questions-spacing /* vertical spacing between survey fields */
	--palette-core-primary /* selected/focused indication, slider thumb */
	--palette-core-outline /* component outline */
	--palette-typography-error /* error message color, such as required validation */
	--slider-track-active-color /* track left side color (smaller than selected value) */ --slider-track-inactive-color /* track right side color (greater than selected value) */
}
.surveyBtn /* submit button */
.ratingMinLabel, .ratingMaxLabel /* represents custom scale labels for rating components*/
	
        
        

Note: 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)