Custom CSS is being overwritten for submit button on a Marketo form

[Anonymous]

​I am trying to customize the css for the submit button and radio buttons on a Marketo form.  I have seen plenty of discussions explaining how to do this in CSS which is fine.  However, for the buttons, my custom css is being overwritten by the default template button css.  I don't see any way to disable that current code.  I have even added the !important tag to each style and still no luck. Any help would be great!
 

[Josh_Hill13]

Did you overwrite this on the page using Custom HTML or on your site? Or did you put the CSS in the Custom CSS section on the Form builder?

[Anonymous]

I placed all of my custom CSS within the Custom CSS form builder.  Here is a link to my test page  http://www.takechargeamerica.org/marketo/.  If you inspect element you will see the current styles.  I used the .mktoButton class to add my styles but they are being overwritten by the template button styles.  My custom CSS is the one with the background color set to black(overwritten).

[Anonymous]

One other option is to use JavaScript to add inline styling to that specific button element when the page loads. 

[Anonymous]

Thanks for the response Murtza!  How would i use javascript in the CSS editor?  I'm curious as to why it seems like everyone else can style their buttons with the CSS editor?

[Anonymous]

I was successful in altering the CSS via javascript.  So thank you Murtza for your help!  I would still like to know why everyone else seems to do this with the CSS editor

[Anonymous]

@Chris, I am glad you got it working. It is recommended to use the CSS editor because it is more maintainable if you keep the CSS and HTML in seperate files. I suggested inline styling as a fix to get this working because of how CSS specificity works. 
 

[Anonymous]

@Murtza, I miss spoke.  I meant to say, I would still like to know why everyone seems to be able to do this with the CSS editor.  I would much rather do this in the CSS editor.