CSS tips

If you wish to tweak your survey style with CSS, here are few ready-made tweaks you can just copy-paste to the CSS editor in the Design view. CSS editor is behind the < / > button in the Style section.

Fit background image to screen

.background {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Remove a navigation button from the survey form

div.controls button[name=_save]
display: none;

Names of the navigation buttons:
_save = Save and continue later (email invite surveys)
_submit = Submit answers
_next = Next page
_prev = Previous page
_returnsubmit = Return to survey to edit answers (email invite surveys)

Adjust vertical spacing between survey elements

.element { margin-bottom: 100px; }

Adjust the px-value.

Make survey work with reading devices for blind respondents

Remove all CSS and replace with the below code:, .field.checkbox {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
background-color: transparent;
} input, .field.checkbox input {
visibility: visible;

Opacity of the slider handle (90%)

.element.eslider .unused .slider .handle {
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
-ms-filter: “alpha(opacity=90)”;
filter: alpha(opacity=90);
opacity: 0.9;


Opacity of the disabled smileys (50%)

.element.eimageselection .option, .element.eimageselection .option.disabled, .element.eimageselection.unused .option.disabled {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
-ms-filter: “alpha(opacity=50)”;
filter: alpha(opacity=50);
opacity: 0.5;


Related topics