Cannot change Submit Button Color

  • Resolved accw

    (@accw)


    6 years, 10 months ago

    Newbie to WordPress I am now entering CSS but seems to be stuck….

    I use the Custom CSS plugin and was able to change the submit button of my gWolle Guestbook page, but I can not seem to change the color of the submit button of the WPForm I want.

    What I did…
    I made a new entry in the plugin and called it “WPS Submit Button”.
    I entered the following code:

    div.wpforms-container-full .wpforms-form input[type=submit],
    div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #6D5856; /* Grey background */
    border: 1px solid #6D5856; /* Dark grey border */
    color: #333; /* Text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
    }

    I had hoped this would change the button to a brownish color.
    But it doesn’t.

    Strange thing is that some other code from the WPS site what should change the color, text size and button size did change the button size ONLY?!

    So it looks like the code is accepted (otherwise the button would not have changed) but is probably overwritten by some deafult setting or whatever?
    Who can help me and how?

    Thanx in advance.
    grt,
    Alex

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Alex,

    I took a look at the Contact page link you shared, and can see that your CSS is being recognized by the browser — for some reason, though, it’s getting set aside in favor of the default styles. In case you’re curious, here’s a screenshot that shows those styles being loaded (crossed out since the browser isn’t using them).

    I was curious if this was something odd with the plugin, so I installed the Simple Custom CSS plugin on my site and added your CSS — but it did work for me. Here’s a short screencast video of that test.

    I’m not sure why this would behave differently on your site, but we can fix it by adjusting the CSS slightly to give it a higher priority in the browser. There are a few ways to do this, but the easiest is to add !important to the end of each line of CSS (before the semicolon). Here’s an adjusted version of your CSS:

    div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #6D5856 !important;
    border: 1px solid #6D5856 !important;
    color: white !important;
}

    In the CSS above, I added white text since the default dark grey value (#333) is tough to see against the brown background — but please feel free to adjust this. I also deleted the font size and padding since these were the same as our default values.

    In case it’s useful, we also have a doc on troubleshooting CSS issues (in this case, the issue falls under Specificity).

    I hope this helps! When you have a chance to give this a try, could you please let me know if this adjusted CSS works for you?

    Thanks! ??

    Thread Starter accw

    (@accw)

    Thank you Jess,

    This fixed it!
    And thank you so much for the explanation and examples!
    This must have taken you some time to test and document and I realy appreciate this.
    As Newbie I learn a lot from this!

    best regard,
    Alex

    You’re welcome, Alex!

    Happy to help, and I’m glad that worked for you ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cannot change Submit Button Color’ is closed to new replies.