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

[Author]

Posts

[gaborG]

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.

[Beda]

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.

[gaborG]

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?

[Beda]

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.