Last active
November 14, 2019 02:30
-
-
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 :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**************************************************************************** | |
*** 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