Advanced Styles

If you click the arrow next to Advanced, you can input Custom CSS. Below is a list of the most common styles used.

body {
  font-family: Verdana,
  Arial,
  Helvetica,
  sans-serif;
  background-color: #fff;
}

textarea,
input,
select {
  background-color: #fff;
  border-color: #f00;
  box-shadow: none;
}

#survey-header {
  background-color: #f00;
}

textarea:hover,
input:hover,
select:hover {
  border-color: #f00;
}

#survey-title {
  color: #fff;
  font-size: 24px;
}

textarea:focus,
input:focus,
select:focus {
  border-color: #f00;
}

.button,
.button.accent {
  background-color: #f00;
  color: #fff;
}

.placeholder,
option.placeholder {
  color: #dbd9d7;
}

.button:hover,
.button.accent:hover {
  background-color: #f00;
}

::-webkit-input-placeholder {
  color: #dbd9d7;
}

.button:active,
.button.accent:active {
  background-color: #f00;
}

::-moz-placeholder {
  box-shadow: none !important;
  color: #dbd9d7;
}

label,
.label {
  color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #dbd9d7;
}

label.radio .radio-button:before,
label.checkbox .radio-button:before,
label.radio .checkbox-button:before,
label.checkbox .checkbox-button:before {
  background-color: #f00;
  border-color: #f00;
}

label.radio .radio-button:after,
label.checkbox .radio-button:after {
  background-color: #f00;
}

label.radio:hover .label,
label.checkbox:hover .label {
  color: #f00;
}

label.ampm-switch {
  background-color: #f00;
}

label.radio:hover input[type=radio]+.radio-button:before,
label.checkbox:hover input[type=radio]+.radio-button:before,
label.radio:hover input[type=checkbox]+.checkbox-button:before,
label.checkbox:hover input[type=checkbox]+.checkbox-button:before {
  background-color: #f00;
  border-color: #f00;
}

label.ampm-switch .toggle-button {
  background-color: #fff;
  border-color: #f00;
}

label.radio input[type=checkbox]:checked+.checkbox-button:before,
label.checkbox input[type=checkbox]:checked+.checkbox-button:before {
  border-color: #f00;
  background-color: #fff;
}

label.ampm-switch .toggle-button:before {
  color: #f00;
}

label.radio input[type=radio]:checked+.radio-button:before,
label.checkbox input[type=radio]:checked+.radio-button:before {
  border-color: #f00;
  background-color: #fff;
}

.sp-slider-background {
  background-color: #f00;
}

label.radio .checkbox-button:after,
label.checkbox .checkbox-button:after {
  border-color: #f00;
}

.sp-slider-connect {
  background-color: #f00;
}

.sp-slider-handle {
  background-color: #f00;
  border-color: #f00;
  box-shadow: none;
}

.question.essay-question ul.essay-info li {
  color: #f00;
}

.sp-slider-handle:after {
  display: none;
}

.question.essay-question ul.essay-info li span {
  color: #f00;
}

.sp-slider-handle:hover {
  background-color: #f00;
  border-color: #f00;
}

.question.scoring-question th,
.question.scoring-question td {
  color: #f00;
}

.sp-slider-handle:active {
  background-color: #f00;
  border-color: #f00;
}

.question.date-time-question .time-separator {
  color: #f00;
}

.question {
  background-color: #fff;
  box-shadow: none;
}

.question footer {
  border: none;
}

.question.scale-question input,
.question.range-question input {
  color: #f00;
}

.question-title {
  color: #f00;
  font-size: 22px;
}

.question.image-question label {
  background-color: #fff;
  border-color: #f00;
}

.question-title .required {
  color: #f00;
}

.question.image-question label figcaption {
  color: #f00;
}

.question-subtitle {
  color: #f00;
}

.question.image-question label.checked {
  border-color: #f00;
}

.complete-mark:after {
  border-color: #f00;
}

.question.image-question label.checked figcaption {
  color: #f00;
}

#welcome-message,
#welcome-message p,
#success-message,
#success-message p {
  color: #f00;
}

.question-form a {
  color: #f00 !important;
}

#welcome-header,
#success-header {
  background-color: #f00;
  color: #f00;
}

.question-form a:hover {
  color: #f00 !important;
}

#question-nav {
  background-color: #fff;
}

#survey-welcome .anonymous-message {
  color: #f00;
}

.question-nav-item {
  border-top-color: #f00;
}

#survey-welcome .note {
  font-family: Verdana,
  Arial,
  Helvetica,
  sans-serif;
}

.question-nav-item:hover,
.question-nav-item.selected {
  background-color: rgba(0, 0, 0, 0.02);
}

#survey-welcome .optional {
  background-color: #f00;
  color: #fff;
}

.question-nav-item.selected {
  border-right-color: #f00;
}

#survey-welcome .required {
  background-color: #f00;
  color: #fff;
}

.question-nav-item-index {
  color: #f00;
}

.question-nav-item-title {
  color: #f00;
}

.ajax-loader li {
  background-color: #f00;
}

.question-nav-item-title span {
  color: #f00;
}

#progress-bar .progress {
  background-color: #f00;
}

#progress-bar:hover {
  background-color: transparent;
}