CSS changes not staying

RE: I made the changes and they were working for a few hours

How did you make the changes?

I would just add the following code via Child Theme or custom CSS plugin:

.wpcf7 input[type="submit"],
?.wpcf7 input[type="reset"],
?.wpcf7 input[type="button"] {
         padding: 1px 1px;
         border-radius: 2px;?
??}

?Targets change to CF7 forms only. Should be no need to use !important which is poor practice.

See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Hi Buzztone. Thanks but it didn’t work.

As usual, all changes were made in the child theme’s style sheet.
I only added !important; because I thought the CSS changes I made must have been overridden by something else. Even when I inspect the element, the old css remains, despite me changing that exact css in the style sheet.

I can’t see any evidence of an active child theme at your site using Firebug – just https://bacheloronabudget.com/wp-content/themes/pinboard/style.css.

You’re right! The child theme is active now.

Do you see what could be causing the issue now?
Thanks

The child theme at https://bacheloronabudget.com/wp-content/the?mes/pinboard-child/style.css is active. But contains no CSS styling except:
@import "../pinboard/style.css"?

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.

You can learn about these extremely useful developer tools at the following links:
https://getfirebug.com/wiki/
https://developers.google.com/chrome-developer-tools/

I actually use a CSS plug-in to edit it called ‘Simple Custom CSS’. I use firebug as well.

I usually don’t have a problem changing the css, but for some reason this isn’t sticking.

I just tried again adding this to the css:

.wpcf7 input[type=”submit”],
?.wpcf7 input[type=”reset”],
?.wpcf7 input[type=”button”] {
padding: 1px 1px;
border-radius: 2px;?
??}

And it showed up again as (when I inspect element):

input[type=”submit”], input[type=”reset”], input[type=”button”] {
padding: 4px 15px;
border-radius: 15px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
background: linear-gradient(#FCFCFC, #F3F3F3) repeat scroll 0% 0% transparent;
border-width: medium medium 1px;
border-style: none none solid;
border-color: -moz-use-text-color -moz-use-text-color #DDD;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
color: #444;
font-family: “Open Sans”,sans-serif;
font-size: 13px;
}

Hi any other ideas for me to be able to change the look of the submit button? I’m still not sure why the CSS isn’t changing..

Thanks

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.

You can learn about these extremely useful developer tools at the following links:
https://getfirebug.com/wiki/
https://developers.google.com/chrome-developer-tools/