Advanced CSS guide

Quick Tip

When using Cognito Forms V2 (beta), new options may require you to adjust the CSS on existing forms. Learn more in our V2 forms CSS guide.

In addition to customizing form styles by choosing fonts, text sizes, and background colors, you can also style your form with CSS. To do this, your form must be embedded into your website. You can then add Cognito Forms properties to your style sheet.

If your form is embedded, you can use the Chameleon style to allow the styles of the page where the form is seamlessly embedded to show through.

Cognito Forms selectors

Selector Class
Form title .c-forms-heading h2
All section titles .c-title > *
All labels .cognito .c-label label, .cognito .c-label
All buttons .cognito button
Submit button #c-submit-button
Help text .c-helptext
All text inputs and dropdowns .cognito input[type=text], .cognito .c-dropdown
Required fields .c-required
Individual fields* .c-email[Data-Field="Email"]

*To target a specific field, reference the class property (ex: “.c-email”) followed by the field name (ex: “Email”)

Field types

Use the class property to target all fields of the same type.

Field type Class
Address .c-address, .c-address-us, .c-address, .c-address-international
Calculation .c-calculation-singleline, .c-calculation-yesno, .c-calculation-decimal, .c-calculation-percentage, .c-calculation-currency, .c-calculation-date, .c-calculation-time
Choice .c-choice-dropdown, .c-choice-radiobuttons, .c-choice-checkboxes
Content .c-html, .c-editor, .c-editor a, .c-editor h1, .c-editor h2, etc.
Currency .c-currency
Date/Time .c-date-date, .c-date-time
Email .c-email
File Upload .c-file
Name .c-name
Number .c-number-integer, .c-number-decimal, .c-number-percent
Phone .c-phone, .c-phone-us, .c-phone-international
Rating Scale .c-rating-scale
Section .c-section
Signature .c-signature
Textbox .c-text-singleline, .c-text-multiplelines
Website .c-website
Yes/No .c-yesno-checkbox, .c-yesno-radiobuttons, .c-yesno-toggle

Common CSS properties

The following are commonly used CSS properties that you can use to style your form:

Property Description
font-size Changes the size of the selected text.
font-weight Bold or un-bold text. Set it to bold or normal.
color The color of text. Set it to any hex value.
background-color The background color of the element’s box. Set it to any hex value.
border-color The color of the border around text inputs and dropdowns.
border-width The size of the border around text inputs and dropdowns.
border-radius Make borders have rounded corners. You can set it to a pixel value, where 0 gives your borders sharp corners and 1px is very slightly rounded.
padding You can set it to a pixel amount. If you want to change the padding for just one side you can use: padding-left, etc.