Cognito Forms logo

Advanced 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 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

Individual fields

To target a specific field, use the field name after the class property:

.c-email[Data-Field="Email"]

Field types

Use the class property by itself to target all fields of the same type. See a full list of field type properties below:

Type Class
Textbox
.c-text-singleline
.c-text-multiplelines
Choice
.c-choice-dropdown
.c-choice-radiobuttons
.c-choice-checkboxes
Yes/No
.c-yesno-checkbox
.c-yesno-radiobuttons
.c-yesno-toggle
Date/Time
.c-date-date
.c-date-time
Currency
.c-currency
Number
.c-number-integer
.c-number-decimal
.c-number-percent
Name
.c-name
Address
.c-address 
.c-address-us
.c-address 
.c-address-international
Phone
.c-phone 
.c-phone-us 
.c-phone-international
Email
.c-email
Website
.c-website
Signature
.c-signature
Rating Scale
.c-rating-scale
Section
.c-section
Calculation
.c-calculation-singleline
.c-calculation-yesno
.c-calculation-decimal
.c-calculation-percentage
.c-calculation-currency
.c-calculation-date
.c-calculation-time
File Upload
.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