Quantcast
Channel: CSS Selectors Archives - Gravity Forms Documentation
Viewing all articles
Browse latest Browse all 35

Submit Button CSS Selectors

$
0
0

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;
}

The post Submit Button CSS Selectors appeared first on Gravity Forms Documentation.


Viewing all articles
Browse latest Browse all 35

Trending Articles