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-containerbutton {}/* 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
Page navigator
Progress bar
Questions
Matrix questions
Question sections
Answers
Answers labels
Sliders
Ranking
Constant sum
NPS Question
CEST / CSAT Question
Errors
Security
Google Material
Following classes will override the default google material component used in ngsurvey's forms. The list is not exhaustive as it only lists the one that are overridden by ngSurvey, you can of course also override any standard material component classes not listed below
/*
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 {}
/*
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 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 {}
/*
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 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 {}
/*
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 {}
/*
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 {}
/*
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 {}
/*
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 {}
/*
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 progress bar wrapper
*/
.ngs-question__answer-constant-sum-progress-wrapper {}
/*
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 {}
/*
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 {}
/*
Selected CSAT answer selection buttons. Classes are applied based on their
rating weight
*/
.ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
.ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
.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,
/*
Error message box container
*/
.ngs-survey__error-message {}
/*
Class used to display the small triangle on
bottom of the error message
*/
.ngs-survey__error-message--bottom:before {}
/*
Class used to display the small triangle on
top the error message
*/
.ngs-survey__error-message--top:before {}
/*
Outer container of the checkbox answer
*/
.ngs-survey .mat-checkbox-layout {}
/*
Defines the content of the checkbox based answerrs
*/
.ngs-survey .mat-checkbox-inner-container {}
/*
Disabled checbkox container background
*/
.ngs-survey .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
.ngs-survey .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {}
/*
Defines the container of the radio button circle
*/
.ngs-survey .mat-radio-inner-circle {}
/*
Defines the container of the radio button outer circle
and selected button must be set using background-color and border-color
*/
.ngs-survey .mat-radio-outer-circle {}
/*
Defines the "checked" radio bbutton outer circle that is not disabled
*/
.ngs-survey .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled) {}
/*
Defines the "checked" radio button inner circle that is not disabled
*/
.ngs-survey .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled) {}
/*
Defines the "checked" checkbox checked selection arrow
*/
.ngs-survey .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),
.ngs-survey .mat-checkbox-indeterminate.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled) {}
/*
Disabled radio button outer circle
*/
.ngs-survey .mat-radio-disabled .mat-radio-outer-circle {}
/*
Disabled radio button inner circle
*/
.ngs-survey .mat-radio-disabled .mat-radio-inner-circle,
.ngs-survey .mat-radio-disabled .mat-radio-ripple .mat-ripple-element {}
/*
Material progress bar in use for constant sum totals
*/
.ngs-survey .mat-progress-overflow .mat-progress-bar-fill::after {}
/*
Material progress bar in use for constant sum totals
*/
.ngs-survey .mat-progress-bar-fill::after {}
.ngs-survey .mat-progress-bar-buffer {}
.ngs-survey .mat-progress-bar-background {}
