Cognito Forms logo

Styling with CSS

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 properties to your style sheet:

Cognito properties

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
All text inputs and dropdowns
.cognito input[type=text], .cognito .c-dropdown
Required fields
.c-required
Field types
.c-text-singleline
.c-text-multiplelines
.c-choice-dropdown
.c-choice-radiobuttons
.c-choice-checkboxes
.c-yesno-checkbox
.c-yesno-radiobuttons
.c-yesno-toggle
.c-date-date
.c-date-time
.c-number-integer
.c-number-decimal
.c-number-percent
.c-currency
.c-name
.c-address 
.c-address-us
.c-address 
.c-address-international
.c-phone 
.c-phone-us
.c-phone 
.c-phone-international
.c-email
.c-website
.c-rating-scale
.c-signature
.c-section
.c-calculation-singleline
.c-calculation-yesno
.c-calculation-decimal
.c-calculation-percentage
.c-calculation-currency
.c-calculation-date
.c-calculation-time
.c-file

 

 

Common properties

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

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.

 

Printable View