Skip to content

Instantly share code, notes, and snippets.

@madalinignisca
Last active November 14, 2019 02:30
Show Gist options
  • Save madalinignisca/7375389 to your computer and use it in GitHub Desktop.
Save madalinignisca/7375389 to your computer and use it in GitHub Desktop.
Gravity forms default styles and built in classes that can be used when creating forms with this plugin Maintained from http://www.gravityhelp.com/documentation/page/Design_and_Layout Use it to style Gravity Forms like a boss :)
/****************************************************************************
*** Gravity styles ***
****************************************************************************/
/*Form Body
contains the main form content*/
body .gform_wrapper .gform_body {border: 1px solid red}
/*Form List Container
unordered list used to structure all of the form elements*/
body .gform_wrapper .gform_body .gform_fields {border: 1px solid red}
/*Form List Items
individual list items containing each form element*/
body .gform_wrapper .gform_body .gform_fields .gfield {border: 1px solid red}
/*Input Field Container
wraps the actual form element inside the containing list item*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {border: 1px solid red}
/*Input Field Description Container
contains the field description inside the containing list item*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {border: 1px solid red}
/*Standard Field Label*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color: red}
/*Required Field Indicator (Asterisk)*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: red}
/*Standard Fields*/
/*Text Field*/
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {border: 1px solid red}
/*Drop-Down (Select) Field*/
body .gform_wrapper .gform_body .gform_fields .gfield select {border: 1px solid red}
/*Paragraph (Textarea) Field*/
body .gform_wrapper .gform_body .gform_fields .gfield textarea {border: 1px solid red}
/*Multiple-Choice (Radio) List
unordered list used to structure all of the individual list choices*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio {border: 1px solid red}
/*Multiple-Choice (Radio) List Items
individual list choices*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li {border: 1px solid red}
/*Multiple-Choice (Radio) Inputs*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li input[type=radio] {border: 1px solid red}
/*Checkbox List
unordered list used to structure all of the individual list choices*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}
/*Checkbox List Items
individual list choices*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {border: 1px solid red}
/*Checkbox Inputs*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {border: 1px solid red}
/*Advanced Fields*/
/*Advanced Field (multi-field) Container
wraps the different fields in multi-field sections like the name fields, address fields, etc.*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {border: 1px solid red}
/*Advanced Field – Left Container
contains the left-positioned inputs and sub-labels in the advanced fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border: 1px solid red}
/*Sub-Label: Advanced Field – Left Container
the sub-label beneath the left-positioned elements in the advanced fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color: red}
/*Advanced Field – Right Container
contains the right-positioned inputs and sub-labels in the advanced fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border: 1px solid red}
/*Sub-Label: Advanced Field – Right Container
the sub-label beneath the right-positioned elements in the advanced fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color: red}
/*Advanced Fields – Full Container
contains the full width inputs and sub-labels in the advanced fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border: 1px solid red}
/*Sub-Label: Advanced Field – Full Container
the sub-label beneath the full width elements in the advanced fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color: red}
/*Time – Hours Container
contains the hours input field and sub-label*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour {border: 1px solid red}
/*Time – Hours Input Field*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input {border: 1px solid red}
/*Sub-Label: Time – Hours*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label {color: red}
/*Time – Minutes Container
contains the minutes input field and sub-label*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute {border: 1px solid red}
/*Time – Minutes Input Field*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute input {border: 1px solid red}
/*Sub-Label: Time – Minutes*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label {color: red}
/*Time – AM/PM Container
contains the minutes input field and sub-label*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm {border: 1px solid red}
/*Time – AM/PM Selector*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select {border: 1px solid red}
/*Date – Input Field (Datepicker Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}
/*Date – Icon Image (Datepicker Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_input_datepicker_icon {border: 1px solid red}
/*Date – Month Container
contains the month input field and sub-label*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}
/*Date – Month Input Field*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}
/*Sub-Label: Date – Month*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label {color: red}
/*Date – Day Container
contains the day input field and sub-label*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}
/*Date – Day Field Input*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}
/*Sub-Label: Date – Day*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label {color: red}
/*Date – Year Container*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}
/*Date – Year Input Field*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}
/*Sub-Label: Date – Year*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label {color: red}
/*HTML 5 Fields*/
/*Email Input Field (HTML 5 Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {border: 1px solid red}
/*Telephone Input Field (HTML 5 Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {border: 1px solid red}
/*Website Input Field (HTML 5 Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url] {border: 1px solid red}
/*Section Breaks*/
/*Section Break Container
wraps the section break elements inside the containing list item*/
body .gform_wrapper .gform_body .gform_fields .gsection {border: 1px solid red}
/*Section Break Title*/
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title {color: red}
/*Section Break Description*/
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description {border: 1px solid red}
/*Captcha Fields*/
/*ReCaptcha Container
third party markup inserted dynamically – contains the ReCaptcha form fields*/
body .gform_wrapper .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area {border: 1px solid red}
/*Captcha Container (Really Simple Captcha Option)
wraps the captcha images and form elements*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container {border: 1px solid red}
/*Captcha Image (Really Simple Captcha Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border: 1px solid red}
/*Captcha Input Field (Really Simple Captcha Option)*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border: 1px solid red}
/*Form Footer*/
/*Form Footer
contains the submit button and admin edit link*/
body .gform_wrapper .gform_footer {border: 1px solid red}
/*Submit Button*/
body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red}
/*Submit Button (image)*/
body .gform_wrapper .gform_footer input[type=image] {border: 1px solid red}
/*Form Confirmation*/
/*Inline Confirmation Message
displays on same page upon successful completion of the form*/
body #gforms_confirmation_message {border: 1px solid red}
/*Validation Errors*/
/*Validation Error Message*/
body .gform_wrapper .validation_error {border: 1px solid red}
/*Validation – Error Container
individual list items containing inputs with invalid values*/
body .gform_wrapper .gform_body .gform_fields .gfield_error {border: 1px solid red}
/*Validation – Error Description Message
description/error message below inputs with invalid values*/
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border: 1px solid red}
/*Multi-Page Form Fields*/
/*Multi-Page Form Progress Bar Container*/
body .gform_wrapper .gf_progressbar_wrapper {border: 1px solid red}
/*Multi-Page Form Progress Bar Title*/
body .gform_wrapper .gform_body .gf_progressbar_wrapper .gf_progressbar_title {color: red}
/*Multi-Page Form Progress Bar*/
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}
/*Multi-Page Form Progress Bar – Percentage Completed*/
body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}
/*Multi-Page Form Steps Container
contains the user-defined steps text*/
body .gform_wrapper .gf_page_steps {border: 1px solid red}
/*Multi-Page Form Step*/
body .gform_wrapper .gf_page_steps .gf_step {color: red}
/*Multi-Page Form Active Step*/
body .gform_wrapper .gf_page_steps .gf_step_active {color: red}
/*Multi-Page Form Page
wraps each “paged” set of fields*/
body .gform_wrapper .gform_body .gform_page {border: 1px solid red}
/*Multi-Page Form Footer
contains previous and next paging buttons*/
body .gform_wrapper .gform_body .gform_page_footer {border: 1px solid red}
/*Multi-Page Form – Next Button*/
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}
/*Multi-Page Form – Previous Button*/
body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}
/*Multi-Page Form – Submit Button*/
body .gform_wrapper .gform_body .gform_page_footer .gform_button {border: 1px solid red}
/*List Fields – NEW for version 1.6*/
/*List Field Container
(div) wraps the list field HTML table*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_listbody .gform_wrapper .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}
/*List Field Table
list field HTML table structure that contains the list field inputs*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_listbody .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list {border: 1px solid red}
/*List Field Table Columns
targets the individual HTML table columns (colgroups) - useful for specifying sizes or creating alternating-color column styles*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_col_odd {border: 1px solid red}
/*List Field Table Headers
targets the individual HTML table headers (labels)*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list thead thtable.gfield_list thead th {color: red}
/*List Field Table Rows
targets the individual HTML table rows - useful for specifying sizes or creating alternating-color row styles*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_row_odd {border: 1px solid red}
/*List Field Table Cells
targets the list field HTML table cells*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_cell {border: 1px solid red}
/*List Field Icons*/
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_icons {border: 1px solid red}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment