This article contains a list of CSS that can be copy and pasted to the Theme that is applied to the form.
All fields
...change the label color
.fsLabel {
color: #aabbcc;
}
...center align Form fields
.fsBody .fsPage {
text-align: center;
}
...change the text color of the supporting text
.fsSupporting {
color: #aabbcc;
}
...change the color of the placeholder text
.fsForm ::-webkit-input-placeholder{
color: #097AB6;
}
.fsForm ::-moz-placeholder {
color: #097AB6;
}
...add focus background for a field (yellow highlighting)
.fsFieldFocused:not(.fsValidationError) {
background-color: yellow;
}
(Change the color of the highlighting by replacing "transparent" with the name or CSS color of the color)
...changes the color of the field focus outline
.fsForm :focus {
outline-color: #75BFE2;
}
// name fields
.fsBody .fsForm input.fsField[type="name"] {
width: 100px;
}
// short answer fields
.fsBody .fsForm input.fsField[type="text"] {
width: 100px;
}
.fsBody .fsForm input.fsRequired[type="text"] {
width: 100px;
}
// long answer fields
.fsBody .fsForm textarea.fsField {
width: 100px;
}
.fsForm textarea.fsRequired {
width: 100px;
}
// number fields
.fsForm input.fsField[type="number"] {
width: 100px;
}
// checkbox fields
// radio buttons
// phone number fields
.fsBody .fsForm input.fsRequired[type="tel"] {
width: 100px;
}
// address fields
// email address fields
.fsBody .fsForm input.fsRequired[type="email"] {
width: 100px;
}
// matrix fields
...increase the width of the label
.fsBody .fsForm .fsMatrix th, .fsBody .fsForm .fsMatrixLabel {
width: 94%;
}
// dropdown field
...change the font size of options in a dropdown
.fsForm select {
font-size: 11px;
}
// date/time field
...remove the calendar from a date/time field
.fsCalendarPickerLink{
display: none;
}
// signature fields
...increase the width and height of a signature field
.fsSignature {
height: 120%;
width: 120%;
}
// required asterisk
...change the color of the required asterisk
.fsRequiredMarker {
color: #FFFFFF;
}
...hide the required asterisk
.fsRequiredMarker span { color: transparent; }