Submit Button CSS Selectors

• Basic Targeting
• Submit Button
• Submit Button (image)
• Use Case Examples
• Basic Example
• Hover Example
• Active State Example
• Hidde Button

Here’s how to apply styles to Gravity Forms submit buttons. You can utilize these selectors to apply any additional styling that you may need.

Basic Targeting

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}
  

Use Case Examples

Basic Example

body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type=submit] {
color:#ffffff;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
padding-right:10px;
border: 1px solid rgba(114,114,114,0.4);
border-radius: 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 1px 0px rgba(114,114,114,0.3);
-moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
-webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
background-color: #0096d6;
}

Hover Example

body .gform_wrapper .gform_footer input[type=submit]:hover {
border: 1px solid rgba(114,114,114,0.6);
background-color: #444444;
}

Active State Example

body .gform_wrapper .gform_footer input[type=submit]:active {
top: 1px;
}

Hidde Button

Using the usual display:none; to hide the button will result in the form submission handler aborting the submission. The following example shows an alternative method to hide the button without causing any trouble.

body #gform_wrapper_1 .gform_footer input[type=submit] {
    visibility: hidden!important;
    position: absolute!important;
    left: -9999px!important;
}