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.

    • Related Articles

    • Overview: Themes

      About themes A theme is the design of your survey as participants see it: fonts, colors, logo, background and a few display rules. Every survey uses one survey theme. LimeSurvey Cloud ships four core themes, and you adjust the look of each survey ...

    • Create your own theme in the theme editor

      About the theme editor Theme options change the look of a survey without code. When you need more, for example your own CSS or JavaScript, create your own theme in the theme editor. Your theme extends a core theme: it inherits all files of that theme ...

    • Reuse questions and groups

      About reusing questions and groups A question or group you built once does not have to be built again. Within a survey, you duplicate it. For a new survey, you start from a copy of the survey that already has the questions. From another LimeSurvey ...

    • Add JavaScript to your survey

      About JavaScript in surveys JavaScript changes the survey while participants take it: it can make a field read-only, react to an answer or add a widget. You add a script to the text of a question with Edit as HTML, and it runs on the page where that ...

    • Reorder, preview, copy and delete questions

      About managing questions and groups Moving, previewing, copying and deleting act on a whole question or question group. The controls sit next to the selected question, at the bottom of it, in the group header and in the Structure panel. In the ...