Submit Button Styling – Transparent?

[alexwright]

Hi-

I notice that “out of the box” the input tags are styled with a background of transparent? Perhaps I’m missing where to style these. I see this in main.css here (line 14964 in my copy) :

input[type=”submit”], button[type=”submit”], .woocommerce button[type=”submit”], .woocommerce input.button, .woocommerce a.button, .woocommerce-cart table.cart input.button, .wpcf7 input.wpcf7-submit[type=”submit”], .gform_wrapper input[type=”submit”], .mymail-form input[type=”submit”], .woocommerce #respond input#submit {
display: inline-block;
font-size: 14px;
line-height: 28px;
height: auto;
padding: 12px 22px;
margin: 0 10px 20px 0;
font-weight: bold;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
background: transparent;
border: 0;
position: relative;
overflow: hidden;
outline: none;
text-shadow: none;
text-decoration: none;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
vertical-align: middle;
max-width: 100%;
border-radius: 2px;
}

I’m a bit unclear on this. Using Gravity Forms, it renders the submit button invisible. Turning off the background:transparent property and value in Chrome dev tools makes the button look fine with the accent color as the background and a shade off that for hover.

Any tips on getting rid of the invisible input tag?

Screenshot and access info given.

THANKS,

-ALex

Attachments:

You must be logged in to view attached files.

[alexwright]

I’ve added this to my child theme style.css to resolve the issue as the page is to go live tomorrow. To see the issue, comment out this line in Chrome developer tools (or whatever you use).

input[type=”submit”],
.gform_wrapper input[type=”submit”] {
background:#7eced5;
}

Thanks,

-Alex

[David Martin – Support]

Hi Alex,

That color is a Accent Color and should be set within the Color Customzer => Color – General => Accent Color

[alexwright]

Hi-

That color is set (to the defaults) but the background: transparent property and value declaration in this CSS is causing the button to show up invisible / transparent except on hover :

input[type=”submit”], button[type=”submit”], .woocommerce button[type=”submit”], .woocommerce input.button, .woocommerce a.button, .woocommerce-cart table.cart input.button, .wpcf7 input.wpcf7-submit[type=”submit”], .gform_wrapper input[type=”submit”], .mymail-form input[type=”submit”], .woocommerce #respond input#submit {
display: inline-block;
font-size: 14px;
line-height: 28px;
height: auto;
padding: 12px 22px;
margin: 0 10px 20px 0;
font-weight: bold;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
background: transparent;
border: 0;
position: relative;
overflow: hidden;
outline: none;
text-shadow: none;
text-decoration: none;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
vertical-align: middle;
max-width: 100%;
border-radius: 2px;
}

Please see this staging site for an example : http://smartchargeam.staging.wpengine.com/nissan-leaf-group-buy/

Screenshots attached. The login information included in the original ticket will work on this staging server.

Thanks,

-Alex

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

hmm, it seems that .gform_wrapper input[type="submit"] is not added within the customizer.

If you add your FTP details, I’ll take a closer look and then can a patch updated sorted.

[alexwright]

This reply has been marked as private.

[David Martin – Support]

Hi Alex,

I have modified includes/customizer/custom_css.php

I have added:

.gform_wrapper input[type="submit"] and .gform_wrapper input[type="submit"]:hover to lines 411 and 412.

Please now re-test the page, you may also need to re-save the theme options.

Please confirm if this is working as expected and I will add the patch to a future update.

[alexwright]

Thanks so much for this. I’ll test later today and let you know. Much appreciated.

Best,

-Alex

[David Martin – Support]

Great, happy to help you out Alex.

[alexwright]

That looks to have totally solved the issue. I’ll let you know if anything else pops up with the button styling with Gravity Forms, but for now please feel free to mark this ticket as resolved. Thanks!

-Alex

[Rui Guerreiro – SUPPORT]

Great. Thanks David.

-Rui