How to customize your survey design using CSS

In this guide, you'll learn how you can style your survey using custom CSS. You can also learn more about specific parameters you can modify to make sure your survey aligns with your website design.

• How to find the CSS customization settings
• List of customizable CSS selectors for surveys
• List of CSS properties with their possible values

---

How to find the CSS customization settings

1. Open an existing survey and click Edit (or create a new survey).

2. Go to the Appearance tab.

3. Add your custom code to the Custom CSS section.

• Take a look at the sections below to learn more about customizable survey elements, CSS properties and their possible values.
• You can copy-paste the custom CSS examples provided in the sections below and adjust them using the available parameters to best align with your website design.

Back to top

List of customizable CSS selectors for surveys

You can use the following CSS selectors to target specific survey HTML elements for styling purposes. In the List of CSS properties with their possible values section below, you can learn more about the CSS properties that you can customize for each selector and their possible values.

To adjust a specific element, copy the corresponding custom CSS example and adjust its properties to style your survey according to your preferences.

survey-button

This selector corresponds to the following survey element:

Custom CSS example:

#survey-button {
    font-family: 'Ambit';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

question-title

This selector corresponds to the following survey element:

Custom CSS example:

#question-title {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

question-description

The Description field is available for the Statement question type only. This selector corresponds to the following survey element:

Custom CSS example:

#question-description {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

answer-body

This selector corresponds to the following survey element:

Custom CSS example:

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

score-label

This selector corresponds to the following survey element:

Custom CSS example:

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

button

This selector corresponds to the following survey element:

Custom CSS example:

#button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

skip-button

This selector corresponds to the following survey element:

Custom CSS example:

#skip-button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline;
}

disabled-button

This selector corresponds to the following survey element:

Custom CSS example:

#disabled-button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

Back to top

List of CSS properties with their possible values

For all the selectors listed above, you can adjust the following CSS properties.

font-family

Custom CSS example:

#survey-button {
   font-family: 'Ambit';
}

font-style

CSS Property	Possible Values
font-style	INHERIT INITIAL ITALIC NORMAL OBLIQUE

Custom CSS example:

#survey-button {
    font-style: italic;
}

font-weight

CSS Property	Possible Values
font-weight	BOLD LIGHT MEDIUM REGULAR ULTRALIGHT

Custom CSS example:

#survey-button {
    font-weight: Bold;
}

font-size

Custom CSS example:

#survey-button {
    font-size: 16px;
}

text-decoration

CSS Property	Possible Values
text-decoration	NONE UNDERLINE

Custom CSS example:

#survey-button {
    text-decoration: none;
}

Back to top