CSS Classes
NGSurvey provides a wide range of CSS classes that can be used to fully customize the layout of your forms.
Below is a list of all classes used by ngSurvey to display its user interface and which you can re-use to customize it.
Wrappers / containers
/*
The body of the survey form, this class is directly attached to
the html body element
*/
.ngs-survey-body {}
/*
Wrapper that holds the survey form page
*/
.ngs-survey__wrapper {}
Page content
/*
Page container for survey header / questions / footer
*/
.ngs-survey__page {}
/*
Applied if an RTL language is selected by the respondenb
*/
.ngs-survey__page--rtl {}
/*
Holds the page content (questions or thanks message(.ngs-survey__thanks-page-message))
*/
.ngs-survey__page-content-container {}
/*
Default thank you message formatting
*/
.ngs-survey__thanks-page-message {}
/*
Set if a header is displayed on the survey (eg: header for language selection)
*/
.ngs-survey__page-content-container--header {}
/*
Set if header is hidden on the survey (eg: header for language selection)
*/
.ngs-survey__page-content-container--no-header {}
/*
Footer container that holds buttons, progress etc..
*/
.ngs-survey__page-footer {}
/*
Footer container for actions (buttons)
*/
.ngs-survey__page-footer-actions-container {}
/*
Footer container buttons (submit, save progress etc..)
*/
.ngs-survey__page-footer-actions-container button {}
/*
Wrapper around the progress bar or current page / total page of the survey
*/
.ngs-survey__page-footer-progress-wrapper {}
/*
The page header allows to set the top background that is located
behind the form page holding the questions
*/
.ngs-survey__page-header {}
/*
Select control dropdown of languages if multi languages is enabled
*/
.ngs-header__language-select-wrapper {}
Buttons
/*
Buttons of the forms like submit, save progress etc..
Note: it doesnt affect selection based buttons that are used
inside the survey form as answers
*/
.ngs-survey__button {}
.ngs-survey__button:hover:enabled {}
.ngs-survey__button:active:enabled {}
.ngs-survey__button:disabled {}
Page navigator
/*
Top page navigator if page navigation has
been enabled
*/
.ngs-survey__page-navigator {}
/*
Applied to the tabs of the navigator that
have invalid answers on their page
*/
.ngs-survey__page-navigator--invalid {}
/*
Applied to the tabs of the navigator that
are currently disabled due to skip / branching
rules
*/
.ngs-survey__page-navigator--disabled {}
/*
Container of the page navigator tabs
*/
.ngs-survey__page-navigator .mat-tab-links {}
/*
Tab of the page navigator
*/
.ngs-survey__page-navigator .mat-tab-link {}
Progress bar
/*
Progress container
*/
.ngs-survey__progress {}
/*
Progress container text if progress
is displayed as text (eg: page numbers)
*/
.ngs-survey__progress-text {}
/*
Progress bar container
*/
.ngs-survey__progress-bar {}
/*
Actual progress bar's progress
*/
.ngs-survey__progress-bar span {}
/*
Pprogress percentage container
*/
.ngs-survey__progress-bar-percentage {}
/*
Pprogress percentage container text label
*/
.ngs-survey__progress-bar-percentage-label {}
Questions
/*
Container of the question and its answers
*/
.ngs-question__container {}
/*
Question container that holds all the answers
Note that ngSurvey adds also automatically the question
type as class named eg for a single selection question the
selector would be "ngs-question ngs-question-single" or
"ngs-question ngs-question-multi" for multiple selections.
*/
.ngs-question {}
/*
Rendering type of the question. Let us know
how the question is rendered and let us style our
question depending on its current rendering type.
X in the class name will replaced by one of the following
rendering value.
Standard = 0 // Enable standard rendering eg: when a user takes a form
DesignTime = 1 // Enable design time eg: in the form builder
EditDefaults = 2, // Eanble editing of answers default values
ReadOnly = 3, // Enable read only mode rendering when a user takes the form (should be replaced by web print ?)
Disabled = 4, // Enable disable mode to render control with disabled items
Edit = 5, // Enable edit mode on controls eg: when an admin edits user's answers
WebPrint = 6, // Enable web printing
Preview = 7, // Enable previewing mode,
Static = 8, // Items are rendered statically from collections
Add = 9, // Enable add when a admin adds a respondent
EditStyle = 10 // Editing of form style */
.ngs-question--render-modeX {}
/*
Helper that can be assigned from each question settings page
to center question text
*/
.ngs-question--centered {}
/*
Applied if any answer of the question is invalid or if
the question is required and hasn't been answered
*/
.ngs-question--invalid {}
/*
Answer container that will only be applied if the
question is set to render the answers horizontally
*/
.ngs-question__rows {}
/*
Answer container that will only be applied if the
question is set to render the answers horizontally
The wrapped class can be used for example in a separate
media query to wrap the content of the flex box if the
screen is not large enought to show all answers in
one row
*/
.ngs-question__rows--wrapped {}
/*
Used if answers are rendered horizontally and if the
answers spacing should be even accross the screen
*/
.ngs-question__rows-items--grown {}
/*
Wrapper around the question's answer row
*/
.ngs-question__answer-wrapper {}
/*
Answer row container if rendered in horizontal mode
*/
.ngs-question__row {}
/*
Container of the question "text"
*/
.ngs-question__header {}
/*
Question's "text"
*/
.ngs-question__header p {}
Matrix questions
/*
Matrix question container for its rows and columns
*/
.ngs-matrix-question {}
/*
Matrix question's header for question text and column text
*/
.ngs-matrix-question__header {}
/*
Used for matrix header description
*/
.ngs-matrix-question__header-label-cell {}
/*
Matrix column headeer
*/
.ngs-matrix-question__header-column-cell {}
/*
Matrix rows container
*/
.ngs-matrix-question__rows {}
/*
Single row container that holds child question text and its answers
*/
.ngs-matrix-question__row {}
/*
Alternate row
*/
.ngs-matrix-question__row--odd {}
/*
Invalid row if any answers for the child question is invalid
*/
.ngs-matrix-question__row--invalid {}
/*
Row child question text
*/
.ngs-matrix-question__label-cell {}
/*
Row child question's answers
*/
.ngs-matrix-question__answer-cell {}
/*
Sticky header, used for matrix questions that
have been collapsed
*/
.ngs-question__header-stick {}
/*
Expand container that allows the respondent
to collaspe or expand a matrix when run in
lower resolutions
*/
.ngs-question__expandable-action-container {}
Question sections
/*
Individual question section that holds the question answers
*/
.ngs-question__section {}
/*
Applied if any answer of the section is invalid
*/
.ngs-question__section--invalid {}
/*
Applied when a selection based answer has been
selected within the question section.
*/
.ngs-question__section--selected {}
/*
Container for the section question. Holds
the actual question (radio, checkbox, matrix etc..)
*/
.ngs-question__section-wrapper-js {}
/*
Container of the section action icons (add / delete)
*/
.ngs-question__section-toolbar {}
/*
add / delete icons for managing a section
*/
.ngs-question__section-icon {}
.ngs-question__section-icon:hover:not(.off) {}
/*
Applied if section limits have been reached
*/
.ngs-question__section-icon--off {}
Answers
/*
Container for the answer type.
Note: ngSurvey adds automatically following class to
identtify answers that have any rating / weight assigned
to them eg: ngs-question__answer rating-weight-3
if a rating weight of 3 has been assigned to the answer
*/
.ngs-question__answer {}
/*
Wrapper of the answer image
*/
.ngs-question__answer-image-wrapper {}
/*
Image that is shown instead of label
if an image has been selected as answer
*/
.ngs-question__answer-image {}
/*
Applied if the image answer is not selected
*/
.ngs-question__answer-image--unselected {}
.ngs-question__answer-image--unselected:hover {}
/*
Applied if the image answer has been selected
*/
.ngs-question__answer-image--selected {}
/*
Applied if the answer image is disabled and
cant be selected
*/
.ngs-question__answer-image--disabled {}
/*
Answer dropdown list type
*/
.ngs-question__answer-select {}
/*
Field based answers
*/
.ngs-question__answer-field {}
.ngs-question__answer-field:focus {}
/*
Angular added classes if field is invalid and touched
*/
.ngs-question__answer-field.ng-invalid.ng-touched {}
.ngs-question__answer-field.ng-invalid.ng-touched:focus {}
/*
Applied if field is hidden
*/
.ngs-question__answer-field--transparent {}
/*
If answers have been set to be rendred has
button instead of checkboxes / radiobuttons
*/
.ngs-question__answer-selection-button {}
.ngs-question__answer-selection-button:hover:not(.ngs-question__answer-selection-button--disabled):not(.ngs-question__answer-selection-button--selected) {}
.ngs-question__answer-selection-button--disabled {}
.ngs-question__answer-selection-button--selected {}
/*
Star rating answer container
*/
.ngs-question__answer-star-graphic {}
/*
SVG star, its the default way to generate stars
*/
.ngs-question__answer-star-graphic-vector {}
/*
Applied if an image has been chosen for the answer
*/
.ngs-question__answer-star-graphic-image {}
/*
Applied if star has been selected
*/
.ngs-question__answer-star-graphic--shining {}
Answers labels
/*
Label element of the answer
*/
.ngs-question__answer-label {}
/*
Label text of the answer
*/
.ngs-question__answer-label-text {}
/*
Label text of the answer rendered in span
if no html has been set as text
*/
.ngs-question__answer-label-text--plain {}
/*
Label text of the answer rendered in a div
if html has been set as text
*/
.ngs-question__answer-label-text--rich {}
/*
Applied if label text is empty
*/
.ngs-question__answer-label--unset {}
/*
Applied if label text is empty
*/
.ngs-question__answer-label--unset {}
/*
Applied if label is an image
*/
.ngs-question__answer-label--imaged {}
/*
Applied if label is rendered inside a matrix cell
*/
.ngs-question__answer-label--in-cell {}
Sliders
/*
Horizontal slider used for rating
*/
.mat-slider-horizontal {}
/*
Thumbs of the slider
*/
.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill {}
Ranking
/*
Box container holding the ranking row
*/
.ngs-question__answer-ranking-box {}
/*
Order of the ranking
*/
.ngs-question__answer-ranking-box-order {}
/*
Label of the ranking
*/
.ngs-question__answer-ranking-label {}
Constant sum
/*
Constant sum progress bar wrapper
*/
.ngs-question__answer-constant-sum-progress-wrapper {}
NPS Question
/*
Container of the nps question
*/
.ngs-question-nps {}
/*
Header holding the Not at all likely and Extremely likely text
*/
.ngs-question-nps__header {}
/*
Right likely header text
*/
.ngs-question-nps__header-likely {}
/*
NPS answer selection box
*/
.ngs-question-nps .ngs-question__answer-nps-selection {}
/*
Applied if the NPS answer selection box is disabled
*/
.ngs-question-nps .ngs-question__answer-nps-selection--disabled {}
/*
Applied if the NPS answer selection box is selected
*/
.ngs-question-nps .ngs-question__answer-nps-selection--selected {}
/*
Turns of the nps answer selection box if an answer has been selected on the question
and its not that answer that has been selected
*/
.ngs-question-nps .ngs-question__section--selected .ngs-question__answer-nps-selection:not(.ngs-question__answer-nps-selection--selected) {}
/*
Does hover effect only if its not disabled or already selected
*/
.ngs-question-nps .ngs-question__answer-nps-selection:hover:not(.ngs-question__answer-nps-selection--disabled):not(.ngs-question__answer-nps-selection--selected) {}
/*
Applies the class depending on the NPS score value
*/
.ngs-question-nps .ngs-question__answer.rating-weight-0 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-1 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-2 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-3 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-4 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-5 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-6 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-7 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-8 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-9 .ngs-question__answer-nps-selection {}
.ngs-question-nps .ngs-question__answer.rating-weight-10 .ngs-question__answer-nps-selection {}
/*
Helper class that is added to the question CSS class properties to show
answers in mono-color
*/
.ngs-question-nps--monochrome .ngs-question__answer-nps-selection {}
/*
NPS selection boxes that are detractors 0-6 weight
*/
.ngs-question-nps--standard .ngs-question__answer-nps-selection--detractors {}
/*
NPS selection boxes that are passives 7-8 weight
*/
.ngs-question-nps--standard .ngs-question__answer-nps-selection--passives {}
/*
NPS selection boxes that are passives 9-10 weight
*/
.ngs-question-nps--standard .ngs-question__answer-nps-selection--promoters {}
CEST / CSAT Question
/*
Container of the answers
*/
.ngs-question-ces .ngs-question__answer,
.ngs-question-csat .ngs-question__answer {}
/*
Answer rows container, by default a media query
has bee setup to width from column / to row
depending on the user resolutions. see below values
*/
.ngs-question-ces .ngs-question__rows--wrapped,
.ngs-question-csat .ngs-question__rows--wrapped {
/* Switch to column mode and display all answers by column
§ flex-flow: column;
flex-wrap: nowrap;
*/
}
/*
Switch to row mode and display all answers in a row
*/
@media screen and (min-width: 960px) {
.ngs-question-ces .ngs-question__rows--wrapped,
.ngs-question-csat .ngs-question__rows--wrapped {
flex-flow: row;
flex-wrap: wrap;
}
}
/*
Answer selection button
*/
.ngs-question-ces .ngs-question__answer .ngs-question__answer-selection-button,
.ngs-question-csat .ngs-question__answer .ngs-question__answer-selection-button {}
/*
Applied to ces/csat questions selection button that are not selected
*/
.ngs-question-ces .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
.ngs-question-ces.ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
.ngs-question-csat .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
.ngs-question-csat.ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected) {}
/*
Monochrome helper that can be applied from the question settings CSS classname
*/
.ngs-question-ces--monochrome .ngs-question__answer .ngs-question__answer-selection-button,
.ngs-question-csat--monochrome .ngs-question__answer .ngs-question__answer-selection-button {}
/*
CES question answer selection button applied on a basis of their weight value
*/
.ngs-question-ces .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
.ngs-question-ces .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
.ngs-question-ces .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
.ngs-question-ces .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
.ngs-question-ces .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
.ngs-question-ces .ngs-question__answer.rating-weight-6 .ngs-question__answer-selection-button {}
.ngs-question-ces .ngs-question__answer.rating-weight-7 .ngs-question__answer-selection-button {}
/*
CSAT question answer selection button applied on a basis of their weight value
*/
.ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
.ngs-question-csat .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
.ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
.ngs-question-csat .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
.ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
/*
Unselected csat answer image inside a question where
an answer has been selected. Used to "turn off" answers
that have not been selected
*/
.ngs-question-csat .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected),
/*
Unselected csat answer image inside a csat image based question where
an answer has been selected. Used to "turn off" answers
that have not been selected
*/
.ngs-question-csat-image .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected) {}
/*
csat / csat image question answer image
*/
.ngs-question-csat .ngs-question__answer .ngs-question__answer-image,
.ngs-question-csat-image .ngs-question__answer .ngs-question__answer-image {}
/*
Default CSAT uses only 3 or 2 images (smiles, thumbs). Classes are applied based on their
rating weight
*/
.ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-image,
.ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-image,
.ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-image,
.ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-image {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-image {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-image {}
/*
Selected csat answer images based. Classes are applied based on their
rating weight
*/
.ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-image--selected,
.ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-image--selected,
.ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-image--selected,
.ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-image--selected {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-image--selected {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-image--selected {}