Introduction
Custom CSS allows you to target specific questions, containers, icons, and more to customize a form's styling to match your branding or preference.
This is not an exhaustive list of all possible classes, ID, attributes, or combinations. It should serve to illustrate many possible options and get you started on the right track.
To discover more selectors, you should familiarize yourself with your browser's developer tools and inspect the elements on the page.
Custom CSS is available on specific pricing plans.
Selectors
Universal
| Selector | Target or Purpose |
|---|---|
.Paperform_Container |
Entire form |
.Paperform__QuestionBlock |
Container of every question group |
.Paperform__QuestionBlock--{key} |
Container for question group specified by key |
.Paperform__Question |
Every question element |
.Paperform__Question--{key} |
Question specified by key |
.LiveField__error |
Any error below any question |
Replace key with desired question's pre-fill key.
Dropdown
| Selector | Target or Purpose |
|---|---|
.Select |
Every dropdown question |
.Select--single |
Dropdown questions that allow only one answer |
.Select--multi |
Dropdown questions that allow more than one answer |
.Select-menu-outer |
Menu listing options when dropdown is focused |
.Select-option |
Individual options in open dropdown menu |
.Select-value-label |
Label of individual answer(s) |
.Select-value-icon |
Icon next to label for questions that allow multiple answers |
#react-select-{key}--list |
Dropdown menu for question specified by key |
#react-select-{key}--option-{index} |
Option at specified index (0-based) within question specified by key |
Replace key and index with desired question's pre-fill key and position (index), respectively.
Multiple choice
| Selector | Target or Purpose |
|---|---|
.Choices |
Every multiple choice question |
.Choices__choice |
Every option individually |
.Choices__choice--{index} |
Option by index (1-based) |
.Choices__label |
Option text |
[aria-checked="true"] |
Determine if option is selected |
Replace key with position (index).
Product
| Selector | Target or Purpose |
|---|---|
.Product__withquantity |
Every product individually |
.ProductCards |
Every product together |
.Product__labelwrapper |
Wrapper for label and price |
.Product__label |
Product label |
.Product__price |
Product price |
.Product__withquantity.MaterialIcon |
Icon for products in list appearance |
.Product__imgthumb |
Product images |
[for="ProductInput__{sku}"] |
Product image for product with sku |
.Product__imgthumb.MaterialIcon |
Icon to expand product images |
Yes / No
| Selector | Target or Purpose |
|---|---|
.YesNo__button |
Both buttons in question |
Appointment
| Selector | Target or Purpose |
|---|---|
.PaperCalendar |
The entire appointment container (includes controls) |
.PaperCalendar__controls |
Navigation, current month, and time zone controls |
.PaperCalendar__back |
Back button for calendar navigation |
.PaperCalendar__forward |
Forward button for calendar navigation |
.PaperCalendar__wrapper |
The entire calendar (excludes controls) |
.PaperCalendar__dayHeader |
Days listed at the top of the calendar |
.PaperCalendar__dayLabel |
All labels for days in the day header |
.PaperCalendar__daysList |
Grid of days displayed in calendar |
.PaperCalendar__day |
All days in the calendar |
.PaperCalendar__day--disabled |
All unavailable days in the calendar |
.PaperCalendar__day--outsidemonth |
Days that are outside the currently selected month |
.PaperCalendar__View--year |
Year selection view |
.PaperCalendar__yearscrollYear |
Each year entry's container |
.PaperCalendar__tzwrapper |
The entire time zone selection (includes search) |
.PaperCalendar__tzwrapper.input |
Time zone search input |
.PaperCalendar__tzscrolltz |
Each time zone entry's container |
.Appointment__time-picker |
Entire time picker (includes day) |
.Appointment__time-picker-back |
Day button within time picker |
.Appointment__time-picker-inner .Appointment__time-button |
Time buttons within time picker |
Date
| Selector | Target or Purpose |
|---|---|
.PaperDateInput-container |
Date input (excludes calendar button) |
.PaperDateInput__wrapper |
Every date input (day, month, year) |
.PaperDateInput__separator |
Separator between date inputs |
[aria-label="toggle calendar"] i |
Toggle calendar icon |
Navigation, year selection, and day selection selectors from the Appointment question apply. Separator selector modifies the separator as is but does not change its content.
Time
| Selector | Target or Purpose |
|---|---|
.PaperTime |
Time input (includes button) |
.PaperTime__time |
Time input (excludes button) |
input[name="hour"] |
Hour input (includes separator) |
input[name="minute"] |
Minute input |
.PaperTime__colon |
Time separator |
.PaperTime__button |
AM/PM button (12-hour time only) |
Separator selector modifies the separator as is but does not change its content.
Scale
| Selector | Target or Purpose |
|---|---|
.Scale__track-wrapper |
Container around scale line and its options |
.Scale__track |
Scale line through options |
.Scale__checkbox-container |
Each option's "checkbox" |
.Scale__checkbox-label-text |
Each option's label |
Slider
| Selector | Target or Purpose |
|---|---|
[data-reach-slider-range] |
Color of slider from start to current position |
.Slider__axis-label--min |
Label of minimum value |
.Slider__axis-label--max |
Label of maximum value |
div[data-reach-slider-handle]::before |
Label of current value above slider |
Rank
| Selector | Target or Purpose |
|---|---|
.Rank |
Container around rank options |
.Rank__option |
Every rank option |
.Rank__option--selected |
Every rank option when answered |
.Rank__order-selector |
Option's current rank (empty if unanswered) |
.Rank__option-label |
Every option's text label |
.Rank__option-handle |
Drag handle on each rank option |
Rating
| Selector | Target or Purpose |
|---|---|
.Rating |
Container around rating icons |
.Rating__option--icon |
Every icon |
.Rating__icon-selected |
Icon when selected |
| `.Rating__icon-unselected | Icon when selected or unselected |
Uploads (image, file)
| Selector | Target or Purpose |
|---|---|
.File btn-raised |
Upload button (single upload) |
.MultipleFiles .BtnV2--raised |
Upload button (multiple uploads) |
.MultipleFiles__file |
Button for uploaded file (multiple uploads) |
.MultipleFiles__file span div span |
File name and upload progress label (multiple uploads) |
.MultipleFiles__file .MaterialIcon |
Removal icon for uploaded file (multiple uploads) |
Gotchas
Question group (block) keys
A question group's key is unique to its specific block of questions. It is automatically generated, cannot be modified, and does not change unless the questions are completely removed and re-added.
Question keys
The key for questions is the auto-generated pre-fill key. Custom pre-fill keys will not work.
Examples
Review our custom CSS cheat sheet for a sampling of real-world use cases with the CSS to achieve them.
Need more help?
If you're having trouble with custom CSS or if you have questions as to how it works, feel free to reach out and ask our support team.
We can help guide you onto the right path and help you understand what you might need to do in order to proceed to build the full solution out yourself. By keeping you involved in the process, you'll be empowered to create, modify, and extend your CSS in the future and ensure the solutions is scalable and sustainable in the long term.
Support is available via the chat icon in the bottom-right corner of the page, or you can email us at support@paperform.co.