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 {}