Contents
- Form Header
- Form Body
- Standard Fields
- Advanced Fields
- Advanced Field (multi-field) Container
- Advanced Field - Left Container
- Sub-Label: Advanced Field - Left Container
- Advanced Field - Right Container
- Sub-Label: Advanced Field - Right Container
- Advanced Fields - Full Container
- Sub-Label: Advanced Field - Full Container
- Time - Hours Container
- Time - Hours Input Field
- Sub-Label: Time - Hours
- Time - Minutes Container
- Time - Minutes Input Field
- Sub-Label: Time - Minutes
- Time - AM/PM Container
- Time - AM/PM Selector
- Date - Input Field (Datepicker Option)
- Date - Icon Image (Datepicker Option)
- Date - Month Container
- Date - Month Input Field
- Sub-Label: Date - Month
- Date - Day Container
- Date - Day Field Input
- Sub-Label: Date - Day
- Date - Year Container
- Date - Year Input Field
- Sub-Label: Date - Year
- HTML 5 Fields
- Section Breaks
- Captcha Fields
- Form Footer
- Form Confirmation
- Validation Errors
- Multi-Page Form Fields - NEW for version 1.5
- Multi-Page Form Progress Bar Container
- Multi-Page Form Progress Bar Title
- Multi-Page Form Progress Bar
- Multi-Page Form Progress Bar - Percentage Completed
- Multi-Page Form Steps Container
- Multi-Page Form Step
- Multi-Page Form Active Step
- Multi-Page Form Page
- Multi-Page Form Footer
- Multi-Page Form - Next Button
- Multi-Page Form - Previous Button
- Multi-Page Form - Submit Button
This awesome css guide for Gravity Forms was originally posted here:
http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
The team here at Rocketgenius is about to release Gravity Forms version 1.5 with several new features and enhancements. Along with these new features, we’ve introduced some new markup and form elements that I’m sure many people will want to style to match their theme. I thought this was a good time to sit down and compile some basic CSS targeting samples for these new elements as well as the other existing form components. This isn’t an “end all be all” list or the only way to target these fields, but it’s intended to be a starting point for those new to Gravity Forms or new to CSS.
I’ve given a few basic usage examples for each element, one that would be generic for all forms and then one (or two) that would be specific to a unique form ID. If you’re styling a specific form, you would simply view your source, find the form ID and replace the ID in my examples with your own.
You’ll note that these examples are more specific (ie: longer) than what you might need to accomplish the styling, but better CSS specificity and inheritance makes overriding inherited theme styles much easier. Enough said, so now on to the examples.
Form Wrapper
example: the main form wrapper (div) – applies to all forms
body .gform_wrapper {border:1px solid red}
example: the main form wrapper (div) – applies just to form ID #1
body #gform_wrapper_1 {border:1px solid red}
Form Header
Form Heading
example: the form heading section (div) – applies to all forms
body .gform_wrapper .gform_heading {border:1px solid red}
example: the form heading section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_heading {border:1px solid red}
Form Title
example: the form title (h3) – applies to all forms
body .gform_wrapper .gform_heading .gform_title {color:red}
example: the form title (h3) – applies just to form ID #1
body #gform_wrapper_1 .gform_heading .gform_title {color:red}
Form Description
example: the form description (span) – applies to all forms
body .gform_wrapper .gform_heading .gform_description {border:1px solid red}
example: the form description (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_heading .gform_description {border:1px solid red}
Form Body
Form Body
example: the form body section (div) – applies to all forms
body .gform_wrapper .gform_body {border:1px solid red}
example: the form body section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body {border:1px solid red}
Form List Container
example: the form list container (ul) – applies to all forms
body .gform_wrapper .gform_body .gform_fields {border:1px solid red}
example: the form list container (ul) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields {border:1px solid red}
Form List Items
example: the form list item (li) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield {border:1px solid red}
example: the form list item (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield {border:1px solid red}
Input Field Container
example: input field container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {border:1px solid red}
example: input field container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container {border:1px solid red}
example: input field container (div) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container {border:1px solid red}
Input Field Description Container
example: input field description container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {border:1px solid red}
example: input field description container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_description {border:1px solid red}
example: input field description container (div) – applies just to specific field description (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_description {border:1px solid red}
Standard Field Label
example: standard field label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color:red}
example: standard field label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {color:red}
example: standard field label (label) – applies just to specific field label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_label {color:red}
Required Field Indicator (Asterisk)
example: required field indicator (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color:red}
example: required field indicator (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required {color:red}
example: required field indicator (span) – applies just to specific indicator (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_label .gfield_required {color:red}
Standard Fields
Text Field
example: standard text field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {border:1px solid red}
example: standard text field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] {border:1px solid red}
example: standard text field (input) – applies just to specific text field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=text] {border:1px solid red}
Drop-Down (Select) Field
example: standard drop-down field (select) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield select {border:1px solid red}
example: standard drop-down field (select) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield select {border:1px solid red}
example: standard drop-down field (select) – applies just to specific drop-down field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield select {border:1px solid red}
Paragraph (Textarea) Field
example: standard paragraph field (textarea) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield textarea {border:1px solid red}
example: standard paragraph field (textarea) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea {border:1px solid red}
example: standard paragraph field (textarea) – applies just to specific paragraph field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield textarea {border:1px solid red}
Multiple-Choice (Radio) List
example: standard multiple-choice list (ul) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio {border:1px solid red}
example: standard multiple-choice list (ul) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio {border:1px solid red}
example: standard multiple-choice list (ul) – applies just to specific multiple-choice list (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio {border:1px solid red}
Multiple-Choice (Radio) List Items
example: standard multiple-choice list item (li) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li {border:1px solid red}
example: standard multiple-choice list item (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio li {border:1px solid red}
example: standard multiple-choice list item (li) – applies just to specific multiple-choice list item (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio li {border:1px solid red}
Multiple-Choice (Radio) Inputs
example: standard multiple-choice input (checkbox) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li input[type=radio] {border:1px solid red}
example: standard checkbox input (checkbox) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio li input[type=radio] {border:1px solid red}
example: standard checkbox input (checkbox) – applies just to specific multiple-choice inputs (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio li input[type=radio] {border:1px solid red}
Checkbox List
example: standard checkbox list (ul) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {border:1px solid red}
example: standard checkbox list (ul) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox {border:1px solid red}
example: standard checkbox list (ul) – applies just to specific checkbox list (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox {border:1px solid red}
Checkbox List Items
example: standard checkbox list item (li) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {border:1px solid red}
example: standard checkbox list item (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li {border:1px solid red}
example: standard checkbox list item (li) – applies just to specific checkbox list item (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox li {border:1px solid red}
Checkbox Inputs
example: standard checkbox input (checkbox) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {border:1px solid red}
example: standard checkbox input (checkbox) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {border:1px solid red}
example: standard checkbox input (checkbox) – applies just to specific checkbox list inputs (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox li input[type=checkbox] {border:1px solid red}
Advanced Fields
Advanced Field (multi-field) Container
example: advanced field container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {border:1px solid red}
example: advanced field container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex {border:1px solid red}
example: advanced field container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex {border:1px solid red}
Advanced Field – Left Container
example: advanced field – left container (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border:1px solid red}
example: advanced field – left container (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border:1px solid red}
example: advanced field – left container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_left {border:1px solid red}
Sub-Label: Advanced Field – Left Container
example: advanced field – left container sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color:red}
example: advanced field – left container sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color:red}
example: advanced field – left container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_left label {color:red}
Advanced Field – Right Container
example: advanced field – right container (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border:1px solid red}
example: advanced field – right container (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border:1px solid red}
example: advanced field – right container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_right {border:1px solid red}
Sub-Label: Advanced Field – Right Container
example: advanced field – right container sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color:red}
example: advanced field – right container sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color:red}
example: advanced field – right container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_right label {color:red}
Advanced Fields – Full Container
example: advanced field – full container (span) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border:1px solid red}
example: advanced field – full container (span) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border:1px solid red}
example: advanced field – full container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_full {border:1px solid red}
Sub-Label: Advanced Field – Full Container
example: advanced field – full container sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color:red}
example: advanced field – full container sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color:red}
example: advanced field – full container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_full label {color:red}
Time – Hours Container
example: time – hours container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour {border:1px solid red}
example: time – hours container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour {border:1px solid red}
example: time – hours container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour {border:1px solid red}
Time – Hours Input Field
example: time – hours input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input {border:1px solid red}
example: time – hours input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour input {border:1px solid red}
example: time – hours input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour input {border:1px solid red}
Sub-Label: Time – Hours
example: time – hours sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label {color:red}
example: time – hours sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour label {color:red}
example: time – hours sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour label {color:red}
Time – Minutes Container
example: time – minutes container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute {border:1px solid red}
example: time – minutes container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute {border:1px solid red}
example: time – minutes container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute {border:1px solid red}
Time – Minutes Input Field
example: time – minutes input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute input {border:1px solid red}
example: time – minutes input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute input {border:1px solid red}
example: tim – minutes input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute input {border:1px solid red}
Sub-Label: Time – Minutes
example: time – minutes sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label {color:red}
example: time – minutes sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute label {color:red}
example: time – minutes sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute label {color:red}
Time – AM/PM Container
example: time – AM/PM container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm {border:1px solid red}
example: time – AM/PM container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_ampm {border:1px solid red}
example: time – AM/PM container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_ampm {border:1px solid red}
Time – AM/PM Selector
example: time – AM/PM selector (select) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select {border:1px solid red}
example: time – AM/PM selector (select) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_ampm select {border:1px solid red}
example: time – AM/PM selector (select) – applies just to specific drop-down field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_ampm select {border:1px solid red}
Date – Input Field (Datepicker Option)
example: date – input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .datepicker {border:1px solid red}
example: date – input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .datepicker {border:1px solid red}
example: date – input field (input) – applies just to specific date field input (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .datepicker {border:1px solid red}
Date – Icon Image (Datepicker Option)
example: date – icon image (img) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_input_datepicker_icon {border:1px solid red}
example: date – icon image (img) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_input_datepicker_icon {border:1px solid red}
example: date – icon image (img) – applies just to specific date field input (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_input_datepicker_icon {border:1px solid red}
Date – Month Container
example: date – month container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month {border:1px solid red}
example: date – month container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month {border:1px solid red}
example: date – month container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month {border:1px solid red}
Date – Month Input Field
example: date – month input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input {border:1px solid red}
example: date – month input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month input {border:1px solid red}
example: date – month input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month input {border:1px solid red}
Sub-Label: Date – Month
example: date – month sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label {color:red}
example: date – month sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month label {color:red}
example: date – month sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month label {color:red}
Date – Day Container
example: date – day container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day {border:1px solid red}
example: date – day container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day {border:1px solid red}
example: date – day container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day {border:1px solid red}
Date – Day Field Input
example: date – day input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day input {border:1px solid red}
example: date – day input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day input {border:1px solid red}
example: date – day input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day input {border:1px solid red}
Sub-Label: Date – Day
example: date – day sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label {color:red}
example: date – sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day label {color:red}
example: date – sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day label {color:red}
Date – Year Container
example: date – year container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year {border:1px solid red}
example: date – year container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year {border:1px solid red}
example: date – year container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year {border:1px solid red}
Date – Year Input Field
example: date – year input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year input {border:1px solid red}
example: date – year input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year input {border:1px solid red}
example: date – year input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year input {border:1px solid red}
Sub-Label: Date – Year
example: date – year sub-label (label) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label {color:red}
example: date – year sub-label (label) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year label {color:red}
example: date – year sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year label {color:red}
HTML 5 Fields
Email Input Field (HTML 5 Option)
example: HTML 5 email field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {border:1px solid red}
example: HTML 5 email field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email] {border:1px solid red}
example: HTML 5 email field (input) – applies just to specific email field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=email] {border:1px solid red}
Telephone Input Field (HTML 5 Option)
example: HTML 5 telephone field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {border:1px solid red}
example: HTML 5 telephone field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel] {border:1px solid red}
example: HTML 5 telephone field (input) – applies just to specific telephone field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=tel] {border:1px solid red}
Website Input Field (HTML 5 Option)
example: HTML 5 website field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url] {border:1px solid red}
example: HTML 5 website field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url] {border:1px solid red}
example: HTML 5 website field (input) – applies just to specific website field (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=url] {border:1px solid red}
Section Breaks
Section Break Container
example: section break container (li) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gsection {border:1px solid red}
example: section break container (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gsection {border:1px solid red}
example: section break container (li) – applies just to specific section break container (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection {border:1px solid red}
Section Break Title
example: section break title (h2) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title {color:red}
example: section break container (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_title {color:red}
example: section break container (li) – applies just to specific section break title (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection .gsection_title {color:red}
Section Break Description
example: section break description (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description {border:1px solid red}
example: section break description (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_description {border:1px solid red}
example: section break description (li) – applies just to specific section break description (based on the unique parent element ID – replace “XX_X” with your actual element ID)
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection .gsection_description {border:1px solid red}
Captcha Fields
ReCaptcha Container
example: ReCaptcha container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area {border:1px solid red}
example: ReCaptcha container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area {border:1px solid red}
Captcha Container (Really Simple Captcha Option)
example: captcha container (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container {border:1px solid red}
example: captcha container (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container {border:1px solid red}
Captcha Image (Really Simple Captcha Option)
example: captcha image (img) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border:1px solid red}
example: captcha image (img) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border:1px solid red}
Captcha Input Field (Really Simple Captcha Option)
example: captcha input field (input) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border:1px solid red}
example: captcha input field (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border:1px solid red}
Form Footer
Form Footer
example: the form footer section (div) – applies to all forms
body .gform_wrapper .gform_footer {border:1px solid red}
example: the form footer section (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer {border:1px solid red}
Submit Button
example: the form submit button (input) – applies to all forms
body .gform_wrapper .gform_footer input[type=submit] {border:1px solid red}
example: the form submit button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer input[type=submit] {border:1px solid red}
Submit Button (image)
example: the form submit button (image) – applies to all forms
body .gform_wrapper .gform_footer input[type=image] {border:1px solid red}
example: the form submit button (image) – applies just to form ID #1
body #gform_wrapper_1 .gform_footer input[type=image] {border:1px solid red}
Form Confirmation
Inline Confirmation Message
example: inline confirmation message (div) – applies to all forms
body #gforms_confirmation_message {border:1px solid red}
Validation Errors
Validation Error Message
example: validation error message (div) – applies to all forms
body .gform_wrapper .validation_error {border:1px solid red}
example: validation error message (div) – applies just to form ID #1
body #gform_wrapper_1 .validation_error {border:1px solid red}
Validation – Error Container
example: validation – error container (li) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield_error {border:1px solid red}
example: validation – error container (li) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error {border:1px solid red}
Validation – Error Description Message
example: validation – error description message (div) – applies to all forms
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border:1px solid red}
example: validation – error description message (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error .validation_message {border:1px solid red}
Multi-Page Form Fields – NEW for version 1.5
Multi-Page Form Progress Bar Container
example: multi-page form progress bar container (div) – applies to all forms
body .gform_wrapper .gf_progressbar_wrapper {border:1px solid red}
example: multi-page form progress bar container (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar_wrapper {border:1px solid red}
Multi-Page Form Progress Bar Title
example: multi-page form progress bar title (h3) – applies to all forms
body .gform_wrapper .gform_body .gf_progressbar_wrapper .gf_progressbar_title {color:red}
example: multi-page form progress bar title (h3) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gf_progressbar_wrapper .gf_progressbar_title {color:red}
Multi-Page Form Progress Bar
example: multi-page form progress bar (div) – applies to all forms
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {border:1px solid red}
example: multi-page form progress bar (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar {border:1px solid red}
Multi-Page Form Progress Bar – Percentage Completed
example: multi-page form progress bar – percentage completed (div) – applies to all forms
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {border:1px solid red}
example: multi-page form progress bar – percentage completed (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {border:1px solid red}
Multi-Page Form Steps Container
example: multi-page form steps container (div) – applies to all forms
body .gform_wrapper .gf_page_steps {border:1px solid red}
example: multi-page form steps container (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_page_steps {border:1px solid red}
Multi-Page Form Step
example: multi-page form step (div) – applies to all forms
body .gform_wrapper .gf_page_steps .gf_step {color:red}
example: multi-page form step (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_page_steps .gf_step {color:red}
Multi-Page Form Active Step
example: multi-page form active step (div) – applies to all forms
body .gform_wrapper .gf_page_steps .gf_step_active {color:red}
example: multi-page form active step (div) – applies just to form ID #1
body #gform_wrapper_1 .gf_page_steps .gf_step_active {color:red}
Multi-Page Form Page
example: multi-page form page (div) – applies to all forms
body .gform_wrapper .gform_body .gform_page {border:1px solid red}
example: multi-page form page (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page {border:1px solid red}
Multi-Page Form Footer
example: multi-page form footer (div) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer {border:1px solid red}
example: multi-page form footer (div) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer {border:1px solid red}
Multi-Page Form – Next Button
example: multi-page form – next button (input) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {border:1px solid red}
example: multi-page form – next button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer .gform_next_button {border:1px solid red}
Multi-Page Form – Previous Button
example: multi-page form – previous button (input) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button {border:1px solid red}
example: multi-page form – previous button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer .gform_previous_button {border:1px solid red}
Multi-Page Form – Submit Button
example: multi-page form – submit button (input) – applies to all forms
body .gform_wrapper .gform_body .gform_page_footer .gform_button {border:1px solid red}
example: multi-page form – submit button (input) – applies just to form ID #1
body #gform_wrapper_1 .gform_body .gform_page_footer .gform_button {border:1px solid red}
Revisions
- September 2, 2015 @ 14:26:24 [Current Revision] by PeterLugg
- September 2, 2015 @ 14:26:24 by PeterLugg
No comments yet.