Comment on page
Custom CSS overrides

Using CSS directly to style form layout and components
The style settings available within the theme editor are mostly simple wrappers around CSS properties that are applied to DOM elements rendered by Formsort. 
If you'd prefer to use CSS syntax directly to style your forms, you can do so, by accessing Theme > General > Content area > Custom CSS and entering valid CSS rules there.
CSS overrides are an escape hatch! Please use our theme editor tools whenever possible.
Targeting elements
When writing custom CSS rules, please use the supported classnames listed below to target specific component types and their elements.
Don't use random-seeming classnames or IDs you may find within the Formsort HTML structure. These should be considered implementation details and are subject to change at any time.
Don't use highly-nested selectors. We may, from time to time, change the DOM structure of layouts and components. Highly-nested selectors are brittle and subject to breaking when this happens.
Targeting groups and steps
You should have ids in steps and groups you want to customize. See these guides to check how to set step id and group id. After setting ids, you can use data-current-step-id and data-current-group-id attributes to target steps and groups.
[data-current-group-id="contact details"] fs__inputInner {
  border-radius: .5em;
}
​
[data-current-step-id="final step"] h2 {
  font-weight: bold;
}
Class reference
Layout
fs__stepContent
This component is the container that wraps step content, question and informational blocks. It is a good choice to override some alignment, padding and font properties that effect whole step. e.g. if you want to change color of labels in a step, you can use this snippet
.fs__stepContent label {
    color: cornflowerblue;
}
You should not override background color or image in this class name. As you can see in the image below, it can have margins around. We'll add fs__step later so that you can override the whole page styles.
​
​
Components
Comparison card
fs__comparisonCard
Card containers in comparison questions. You can set some overrides for components within the card such as font, alignment etc. Also you can use this class name to set gradient backgrounds and adjust positioning like margins and paddings.
​
​
Card content consists of 3 parts: title, body, and action containers.
Comparison card sections
You can use 
fs__comparisonCardTitle to style title section.
fs__comparisonCardBody to style body section.
fs__comparisonCardAction to style action button section.
fs__comparisonCardTitle, fs__comparisonCardBody, and fs__comparisonCardTitle to style them individually.
​
To customize highlighted and selected states, you can use fs__highlighted and fs__selected class names. e.g.
fs__comparisonCard.fs__selected .fs__comparisonCardBody {
    font-weight: bold;
}
Divider
fs__divider
You can set divider color with background-color, height, margins, etc.
​
​
Select buttons
The following class names used in containers that wrap a set of select buttons.
fs__sb-container: for all containers, if you want to edit some styles for all select questions with buttons you can use this class name.
fs__sb-grid, fs__sb-space-around, fs__sb-space-between, fs__sb-vertical, fs__sb-snug and fs__sb-horizontal: used in select questions with different layouts. e.g. you can use fs__sb-space-around to override styles of select buttons with horizontal layout. Check select button layout options for more details.
fs__sb-checkmark: override styles of select buttons that use checkmarks.
fs__sb-image: override styles of select buttons that use images.
Select dropdown
Select dropdowns consist of 3 parts: container, list and list items. These styles apply to select questions when the "dropdown" picker style is used. You can use fs__dropdown-container to apply style overrides to both input and list, such as text alignment and font style. To customize dropdown list and dropdown items you can use fs__dropdown-container and fs__dropdown-list-item. e.g.
.fs__dropdown-container {
    font-weight: bold;
    text-align: center;
}
​
.fs__dropdown-list {
    margin-top: 24px; /* more space between input and list */
    background-color: lightyellow;
}
​
.fs__dropdown-list-item {
    margin-bottom: 8px;
    padding: 4px 8px;
}
fs__dropdown-container
​
​
fs__dropdown-list
​
​
fs__dropdown-list-item
​
​
​
To customize highlighted, selected and disabled styles of list items, you can use common formsort class names: fs__highlighted, fs__selected and fs__disabled. e.g.
.fs__dropdown-list-item.fs__highlighted {
    border-color: deepskyblue;
}
​
.fs__dropdown-list-item.fs__selected {
    background-color: mediumpurple;
    color: white;
}
Text inputs
For most of input styles you can use fs__inputInner. Use fs__inputWrapper for margins and widths. e.g.
.fs__inputInner {
    background-color: aquamarine;
    padding: 8px;
    ...
}
​
.fs__inputWrapper {
    margin-bottom: 16px;
    max-width: 80%;
}
For input prefix and suffix, you can use fs__inputPrefix and fs__inputSuffix.
​
​
​
e.g.
.fs__inputPrefix {
    padding-right: 24px;
}
​
.fs__inputSuffix {
    font-style: italic;
}
Just like in plain css, you can use pseudo-classes to customize input states like focus, hover, disabled and invalid. e.g.
.fs__inputInner:hover, .fs__inputInner:focus {
    background-color: purple;
}
​
.fs__inputInner:invalid {
    background-color: rgba(255, 0, 0, .2);
}
Comparison cards
Next - Building flows
Variant settings
Last modified 1mo ago