If you wish to tweak your survey style with CSS, here are few ready-made snippets you can just copy-paste to the CSS editor in the Design view. CSS editor is behind the </> button in the Style section.
You can for example use following CSS snippets to edit the survey.
Adjust column width in a certain scale element
div.element.escale[elementname="p0e0"] .td.block
{
width: 20%;
}
p0e0 is the location of the element on the survey form. First page first element in the CSS-example. Calculate pages 'p' from zero and elements 'e' on each page from zero. Include images and text elements to the calculations.
Adjust column width in all scale and table elements in the survey
div.element.escale .td.block
{
width: 20%;
}
Adjust vertical spacing between elements
.element { margin-bottom: 100px; }
Align all elements' titles to the center
.element h1, .element h3
{
text-align: center;
}
Change image selection element's image size
.element.eimageselection .options
{
width: 70%;
margin: auto;
}
Change column's color in scale and table elements
.tr.statement .tr.options .td:nth-child(3)
{
background-color: red;
}
Vary the number inside round brackets to change column. If you wish to use the color only in one scale or table element, use code below.
div[elementname="p0e0"] .tr.statement .tr.options .td:nth-child(2)
{
background-color: red;
}
p0e0 is the location of the element on the survey form. First page first element in the CSS-example. Calculate pages 'p' from zero and elements 'e' on each page from zero. Include images and text elements to the calculations.
Modify the survey to support screen readers
Replace all custom CSS with code below.
.field.radio, .field.checkbox
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
background-color: transparent;
}
.field.radio input, .field.checkbox input
{
visibility: visible;
}
Prevent word break in selection elements when options are stacked
div.element.eoption .option .value-container label.label
{
word-break: keep-all;
}
Remove a navigation button from the survey form
div.controls button[name=_returnsubmit]
{
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)