Unabel to style submit button

Get Help
,
1

I have been trying to add styles to submit button but gravity forms wp plugin overrides it, is it possible to diable all the styling from gravty forsm styling

I have tried these settings

body .gform_wrapper .gform_footer input[type=submit] {

border

:

1px

solid

red

}


* **example:** the form submit button (input) – applies just to form ID #1

1 ```
body #gform_wrapper_

1

.gform_footer input[type=submit] {

border

: 

1px

solid

red

}

But nothing happens, best would be if you could disable the gravity forms scc in settings
I have been trying to style for 2 hours and nothing
Even tried to

#gform_submit_button_2{
display: inline-block;
text-transform: uppercase;
text-decoration: none;
padding: 0 18px;
font-size: 16px;
line-height: 45px;
min-width: 145px;
font-weight: 400;
border-radius: 0 40px;
transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
font-family: “gotham_narrowbook”;

text-align: center !important;
background: #fff !important;
color: #222221 !important;
border: 1px solid #222221 !important;
}
Nothing its still crappy blue

2

Hi Joakim,

Could you please share the code by hosting it on the Codefile website and also provide the URL of the form page so that I can investigate further to resolve the issue?

3

the site is here

4

Also added custom class on and it is not in code when i check source on that part

bild
bild2225×307 14.5 KB

5

BOKA - Avalon Site

codefile

6

Hi Joakim, :wave:

Please try the modified CSS from below. I’ve added the form ID on the selector to make it more specific, so it’ll be more priority over the default selector.

.avalon-form_wrapper #gform_2  #gform_submit_button_2 {
  padding: 0 18px;
  font-size: 16px;
  line-height: 45px;
  min-width: 145px;
  font-weight: 400;
  border-radius: 0 40px !important;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
  font-family: "gotham_narrowbook";
  
  text-align: center;
  background: #fff;
  color: #222221;
  border: 1px solid #222221 !important;
}

.header-no-border {
  border-bottom: none;
  padding: 150px 16px 60px 0;
}

image
image3840×1936 168 KB

I’ve made a screen recording that might help you understand why I removed some CSS properties and values and when I made the selector more specific.

Give it a try, and let me know how that goes! :smile: