Dubsado forms are highly customizable, and you can take them even further with CSS. This article is a reference guide to the supported CSS selectors for styling Dubsado form elements.
Tips for using the CSS editor
The CSS editor is where you manage all of your custom styles for a form. To access it, open a form template in the form builder, select the Styling tab, scroll to the Custom CSS section, and click Edit CSS. This opens the Edit custom CSS sub-panel.
A few tips to get the most out of the CSS editor:
No
<style>tags are needed — just add your styles directly.You can inspect elements using your browser's developer tools while the form is in Preview mode. This is a good way to find element IDs and test selectors before committing to them.
Use Preview mode frequently to check your work as you go, then do a final test by opening the form as your client would.
Most form elements have a unique ID that you can find using your browser's inspector.
Due to the complex nature of custom code, the Customer Care team is not able to provide support on forms with custom code. For help with custom code, ask in the Dubsado Circle community or contact a web developer.
Style priority levels
Several built-in styling sources can override your custom CSS. The list below shows the priority order from highest to lowest, meaning styles earlier on the list will override styles below them.
Element styling inline — Formatting applied directly inside a text editor element using the formatting toolbar. This is the most specific override.
Container style settings — Changing a container's text color or background can override your CSS.
Custom CSS — The CSS you add in the Styling tab overrides any form style settings.
Form style settings — Settings like the Question styling options in the Styling tab.
For example, your custom CSS would override form style settings, but container style settings would override your custom CSS.
The .dubsado-form class
When styling Dubsado forms, use the .dubsado-form class as a parent selector rather than targeting generic elements like body, p, or input directly. This keeps your styles scoped to the form itself and prevents them from affecting the form builder.
For example, to change the border radius on input fields, scope it with .dubsado-form:
.dubsado-form input { border-radius: 20px; }
You can also use .dubsado-form the same way you would use the body selector to style the form as a whole:
.dubsado-form { background-color: #eeeeef; }
Avoid using the body selector or generic element selectors without a class. Scoping with .dubsado-form keeps your styles targeted and prevents unintended changes to the builder interface.
Typography and text boxes
The text box element supports Heading 1 through Heading 4 and Paragraph styles. You can apply these using Paragraph formatting in the text editor toolbar. Defining CSS for each heading level and for paragraphs lets you use those options to apply your styles consistently as you build.
A couple of things to keep in mind:
Remove any default font face, size, and color set in the Styling tab under Question styling to prevent those settings from overriding your CSS.
Inline formatting applied within text boxes can also override your CSS. Clear it first using the Clear formatting button in the toolbar, then apply paragraph styles.
Text box elements can also be selected with the
.form-text-elementclass, though you may notice some differences in appearance between the builder and the preview or public view.
Style text using the .dubsado-form class and the appropriate element selector:
.dubsado-form h1 {}
.dubsado-form h2 {}
.dubsado-form h3 {}
.dubsado-form h4 {}
.dubsado-form p {}
Form fields
The sections below provide CSS selectors for all basic form field elements. Note that you may need to use !important when declaring certain styles, as indicated in the comments.
All fields
Use these selectors to apply styles across all form field types at once.
/* All fields label text */
.form-element__input-label {}
/* All fields placeholder text */
.dubsado-form input::placeholder,
.dubsado-form textarea::placeholder,
.dubsado-form .select--placeholder {}
/* All input fields --- use !important */
.dubsado-form input, .dubsado-form textarea, .dubsado-form select {}
Text input fields
If you are using the all-fields selectors above, you only need these if you want to make changes specific to short answer or free response fields.
/* Short answer */
.form-element__input {}
/* Free response */
.free-response-element__text-area {}
Dropdowns
Some dropdown styles may not be visible in the form builder. Preview the form or open it as a client to test your code. These selectors will apply to the dropdown element, the flow element, and the project tracking element.
/* Dropdown fields */
.dubsado-form select {}
/* Dropdown caret */
.form-element__select-container::after {}
/* Dropdown selected option text --- use !important for color */
.dubsado-form .form-element__select-container .select--selected-option {}
Checkboxes
These selectors are for the checkboxes element only. For package checkboxes, see the Packages section below.
/* Checkbox option label text */
.form-checkbox-element .checkbox-option label {}
/* Checkbox unchecked */
.form-checkbox-element .checkmark {}
/* Checkbox checked */
.form-checkbox-element .checkbox-option input:checked ~ .checkmark {}
/* Checkbox checked checkmark */
.form-checkbox-element .checkbox-option .checkmark:after {
border-color: ; /* checkmark color */
}
Multiple choice (radio buttons)
/* Multiple choice option label text */
.form-multiple-choice-element .radio-option label {}
/* Multiple choice radio button unselected */
.form-multiple-choice-element .checkmark {}
/* Multiple choice radio button unselected hover */
.form-multiple-choice-element .checkmark:hover {}
/* Multiple choice radio button selected */
.form-multiple-choice-element .radio-option input:checked ~ .checkmark {}
/* Multiple choice radio button selected marker */
.form-multiple-choice-element .radio-option .checkmark:after {
background-color: ; /* inner circle color */
}
Date select
The date select element has many components that can be styled. Its appearance also changes to include a time field when the element is mapped to a project start or end date.
Use Preview mode or open the form as a client to interact with date select elements and test your code.
/* Date select input fields --- use !important for borders */
.dubsado-form .date-input input {}
/* Date select calendar button --- use !important */
.dubsado-form .date-input .icon-button__button {}
/* Date select calendar button icon --- use !important */
.dubsado-form .date-input .icon-button__icon {}
/* Time select input field --- use !important for borders */
.dubsado-form .time-select input {}
/* Time select dropdown menu */
.dubsado-form .time-select .time-select__menu {}
/* Time select dropdown menu hover */
.dubsado-form .time-select .time-select__menu .time-select__option:hover {}
File uploader
The file uploader element appears as a button. Once a file is uploaded, a list appears with a preview of the file, a download link, and an option to remove it.
Open the form as a client to interact with the file uploader and test your code. Using a lead capture form lets you test more quickly — open the direct link and refresh after saving changes in the builder.
/* File uploader button */
.file-element__drop-zone .upload-btn {}
/* File uploader button hover */
.file-element__drop-zone .upload-btn:hover {}
/* File uploader text below button */
.file-element__drop-zone {}
/* File uploader drop zone (appears when a file is dragged to upload) */
.file-element__drop-zone.--dragging {}
/* Uploaded file list (appears when at least one file is uploaded) */
.file-element__file-list {}
/* Uploaded file list row */
.file-element__file-list .uploaded-file {}
/* Uploaded file list odd rows */
.uploaded-file:nth-child(odd) {}
/* Uploaded file list even rows */
.uploaded-file:nth-child(even) {}
/* Uploaded file preview image (image uploads only) */
.uploaded-file__file-preview img {}
/* Uploaded file preview icon (other file type uploads only) */
.uploaded-file__file-preview svg {}
/* Uploaded file name (download link) */
.uploaded-file__file-name {}
/* Uploaded file delete button */
.file-element__file-list .uploaded-file__delete-btn {}
/* Uploading file cancel button (briefly visible during upload) */ .file-element__file-list .uploaded-file__cancel-btn {}
Initials and signature areas
Initials and signature area elements are only available on contracts and sub-agreements.
/* Initials element */
.initials-element {}
/* Initials input --- may require !important */
.initials-element__initials-input {}
/* Initials text */
.initials-element__text-label {}
/* Signature area element */
.signature-element {}
/* Signature area text */
.signature-element .form-element__input-label {}
/* Signature area first and last name fields --- may require !important */
.signature-element .signature-name-fields-name {}
/* Signature area first and last name fields placeholder */
.signature-element .signature-name-fields-name::placeholder {}
/* Signature field label */
.signature-input-label {}
/* Signature field --- may require !important */
.signature-element .signature-input-field {}
/* Signature field placeholder */
.signature-element .signature-input-field::placeholder {}
/* Signature information text */
.signature-element .signature-information {}
Required fields
Required fields have default styles to help clients identify which fields still need to be completed. You can customize these styles using the selectors below. Keep the error state easy to see so clients can quickly spot any missing fields.
/* Required field asterisk */
.dubsado-form .required-field-indicator {}
/* Required field border */
.form-viewer-element .has-error input,
.form-viewer-element .has-error textarea,
.form-viewer-element .has-error select {}
/* Required field error text */
.form-viewer-element .has-error .required-message {}
Proposals
Proposals have their own styling considerations for the navigation tabs that appear when a contract and/or invoice is included, as well as for the package elements within the proposal.
Proposal navigation tabs
When a proposal is set to show a contract and/or an invoice, navigation tabs appear at the top of the page. Use the selectors below to style them.
Repeat these styles on your contract template, since styling from the proposal does not carry over.
/* Proposal tabs area */
.client-view-tabs {}
border: ; /* styles the underline below the tabs */
/* Proposal tabs text */
.client-view-tabs-col-label {}
/* Proposal tabs underline --- use !important */
.client-view-tabs-col div {
border: /*styles the underline below the tabs*/;
}
Packages
/* Package elements */
.form-package-element {}
/* Package item names and amounts table (generated by smart field) */
.form-package-element table {}
/* Package item names and amounts all table cells */
.form-package-element table thead td,
.form-package-element table tbody td {}
/* Package item names and amounts table header row */
.form-package-element table thead {}
/* Package item names and amounts odd rows */
.form-package-element table tbody tr:nth-child(odd) td {}
/* Package item names and amounts even rows */
.form-package-element table tbody tr:nth-child(even) td {}
/* Package item names and amounts table item name column */
.form-package-element table thead tr td:nth-child(1),
.form-package-element table tr td:nth-child(1) {}
/* Package item names and amounts table description column */
.form-package-element table thead tr td:nth-child(2),
.form-package-element table tr td:nth-child(2) {}
/* Package item names and amounts table description text */
.form-package-element table ul {}
/* Package item names and amounts table quantity column */
.form-package-element table thead tr td:nth-child(3),
.form-package-element table tr td:nth-child(3) {}
/* Package item names and amounts table tax column */
.form-package-element table thead tr td:nth-child(4),
.form-package-element table tr td:nth-child(4) {}
/* Package item names and amounts table subtotal column */
.form-package-element table thead tr td:nth-child(5),
.form-package-element table tr td:nth-child(5) {}
/* Package button unselected */
.form-package-element .packageNotSelected .btn.btn-squared.border-around {}
/* Package button unselected hover */
.form-package-element .packageNotSelected .btn.btn-squared.border-around:hover {}
/* Package button selected --- use !important and repeat any style changes you made to the unselected button */
.form-package-element .packageSelected .btn.btn-squared.border-around {}
/* Package quantity box unselected */
.form-package-element .packageNotSelected .packageQuantity {}
/* Package quantity box selected --- repeat unselected styles here if you don't want the box to change when a qty is entered */
.form-package-element .packageSelected .packageQuantity {}
/* Package large checkbox unselected */
.form-package-element .checkbox label.text-left::before {}
/* Package large checkbox selected */
.form-package-element .packageSelected .clip-check.check-info.check-brand-color label:before {}
/* Package large checkbox selected checkmark */
.form-package-element .packageSelected .clip-check label:after {
color: ; /* checkmark color */
}
/* Package small checkbox unselected */
.form-package-element .roast label:before {}
/* Package small checkbox selected */
.form-package-element .packageSelected .roast label:before {}
/* Package small checkbox selected checkmark */
.form-package-element .packageSelected .roast label:after {
color: ; /* checkmark color */
}
Submit button and footer
The footer contains the submit button, a PDF download button, and a back to portal button (if the portal is active). Some elements — like the proposal total and the save draft button — only appear on certain form types.
/* Footer area */
.form-viewer-footer {}
/* Proposal total */
.proposal-total {}
/* Questionnaire save draft button */
.save-draft-button {}
/* Submit button --- use !important */
.submit-form-button {}
/* PDF download button */
.pdf-button {}
/* PDF download button icon --- use !important */
.pdf-button svg {}
/* Back to portal button */
.back-to-portal-button {}
/* Back to portal button back arrow --- use !important */
.back-to-portal-button svg {}
FAQ
Will Dubsado ever make changes to forms that affect my custom code?
The team continues to improve forms, and changes may occasionally affect custom code. Dubsado cannot guarantee that custom code beyond what is shared here will not be affected by future updates to the form builder and client view.
Can Dubsado help me write my custom code?
The Customer Care team cannot provide support for writing or troubleshooting custom code. They can help you find a solution within the builder or bring your feedback to the Product team. For help with custom code, ask in the Dubsado Circle community or reach out to a web developer.