CSS Use Cases

This set of topics will show you some survey appearance problems that may arise when you design a survey and use cases how these problems can be resolved by means of CSS.

We will work with different question types such as Single Line Text, Matrix, Pick One (Radio Buttons), Rating Scale, Multi-line Text.

If the changes need to be applied to some specific question or the element within a specific question, you can refer to it by using the sequence number of the question or the custom identifier.

To refer to the CSS to the question number, use the following class .aDivQuestion_QXXX where XXX should be replaced with the question sequence number. Note that the class should be updated each time if the question is moved or deleted.

If the question has an assigned custom identifier, you can refer to it by using .aDivQId_questionIdentifier where questionIdentifier should be replaced with the question custom identifier. In this case, copying the form or changing the order of the questions won't have an impact on the applied styles.

Sometimes the CSS changes may not be reflected right away due to a browser caching. Try clicking "Ctrl + F5" ("Command + Shift + R" on Mac) to refresh the page omitting cache.

Here are the examples of custom design editing:

Use Case	Description
Use Case 1	Single-Line question appearance, the position of the input text fields.
Use Case 2	Pick One (Radio Buttons) question with across answer choices position.
Use Case 3	Horizontal and vertical appearance of the Matrix question items.
Use Case 4	Scale items font size for the Matrix and Rating Scale types of question.
Use Case 5	Other and Comment fields customization for Pick One or Other and Pick One with Comment questions.
Use Case 6	The modification of slider colors.
Use Case 7	Changing form background color.
Use Case 8	Changing font size of answers typed in open-ended fields (Single line, Multiline).
Use Case 9	Adding a new font to the Form.