Skip Navigation

[Resolved] Styling the Submit button doesn't work in style.css

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 3 replies, has 2 voices.

Last updated by Beda 5 years, 4 months ago.

Assigned support staff: Beda.

Author
Posts
#402430

I use this code to style the Submit button, which works perfectly if I put it into Layouts CSS:

input[type=submit] {
  background: #255484;
  border: 1px solid #255484;
  padding: 10px 20px;
  border-radius: 5px;
}

But if I place this code into style.css instead, it doesn't work. Interestingly, styling the other form elements from style.css this way works just fine. Only the Submit button has issues.

I don't want to use the Layouts CSS because it loads too late and for a while the Submit button can be seen with its default design before my custom CSS is applied.
What can be the problem? How can I style the button from style.css?
THanks.

#402512

Your CSS code works perfectly fine also in a Theme's Style.css.

Since CSS is hierarchical, I assume AFTER your Custom CSS you got another CSS that again overwrites your Custom CSS, or, your Style.css is loading too early, and some other is overwriting it.

I tested the CSS locally, it's correct, and works in Layouts CSS, Views CSS and my Theme's CSS as well.

#402569
Button CSS 1.jpg
Button CSS 2.jpg

I realize that there are only 2 parts of the code which don't work, the two related to colors - the background and the border.
See the attachments.

Does the color display correctly on your test?

#402641
Bildschirmfoto 2016-05-30 um 15.18.29.png
Bildschirmfoto 2016-05-30 um 15.18.19.png

See the ScreenShot.

I think you somewhere overwrite your CSS after your above Rule.

Please check your Styles everywhere, and ensure that nothing is overwriting it.

You can also analyse this with the Browser consoles, and you see where from the Style is coming that overwrites your Style.

As the last solution, you could "not load CRED style sheets on front-end" in Toolset > Settings > Forms, or use an !important in your CSS, which I do not recommend.