Advanced styles

If you select the arrow next to Advanced, you can enter Custom CSS. The following list shows 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;
}