Style questions with CSS | LimeSurvey

Style questions with CSS

About styling questions with CSS

Theme options change fonts and colors for the whole survey. To style single questions, question types or parts of a question, add CSS to your own theme. Your rules go into the file custom.css of your theme, which the theme loads last. See Create your own theme in the theme editor.

Find the question ID

Select the question in the editor. Its ID appears in the address bar of your browser, after question=. In the survey, the question sits in a container with the ID question plus this number, for example #question105.

Classes you can use

  • .question-container: every question. A second class names the question type, for example .list-radio for List (radio) and .array-flexible-row for Array (Point choice).
  • .question-title-container and .question-text: the question text.
  • .question-help-container: the help text of the question.
  • .question-valid-container: the tips below the question text, for example Choose one of the following answers.
  • .answer-container: the answers. Each answer option is an .answer-item.
  • .group-title: the title of a question group.
  • .progress-bar: the progress bar.
  • #ls-button-submit: the Next button, or Submit on the last page.

Examples

/* The text of question 105 in bold */
#question105 .question-text { font-weight: bold; }

/* A gray background for the answers of all List (radio) questions */
.list-radio .answer-container { background-color: #f5f5f5; }

/* A green Next and Submit button */
#ls-button-submit { background-color: #2e7d32; }

In the theme editor, the rules go into custom.css:

The file custom.css in the theme editor with two areas numbered 1 and 2, the CSS rules and Save

  1. Your rules, below the comment at the top of the file.
  2. Save: saves the file. In a theme that does not have its own custom.css yet, the button is Copy to local theme and save changes.

Tip: To find the class of any other element, open the survey preview, right-click the element and use the Inspect function of your browser.

Next steps

FAQ

How do I hide the asterisk of mandatory questions?

Mandatory questions show an asterisk and the word Required above the question text. To hide both, add this line to custom.css of your theme: .asterisk, .ls-question-mandatory { display: none; }. The questions stay mandatory.