CODEWITHSUNDEEP
htmlcss
Milad R
Milad R

Reputation: 1892

Why submit button's color changed strangely?

This is the default color of a submit button, without any particular style. (using chrome)

enter image description here

And this is that button after using this input[type="submit"]{border-radius: 2px;}.

enter image description here

As you see the color of the second one, changed suddenly without any particular reason and also you can see shadow on the right and the bottom sides of the border. (body{direction:rtl;})

What's the reason? I just need the default button with a bit round border(no more). Is there any solution? or I should use an image for this?

JSFiddle here.

Upvotes: 8

Views: 286

Answers (2)

Chris Sobolewski
Chris Sobolewski

Reputation: 12945

If you are attempting to style a form submission button, you are very much so better off using the button element which is fully styleable. The input type=submit element is very hard to style and not consistent across browsers. <button> will let you do anything to it.

Upvotes: -3

rvighne
rvighne

Reputation: 21897

The regular, unstyled button is a system UI element (or in Chrome's case, a custom one). Thus, it might not have a CSS equivalent. So when you try to style the button, it reverts back to a plain one that can be styled, but happens to have different colors.

You are going to have to completely take over and specify every part of the button to get a similar look back (and even if you do this, Firefox users, which uses the system default buttons, are going to have a shock). If you liked that look, here's how to replicate it to some degree (Demo):

border: thin solid gray;
border-radius: 2px;
padding: 2px 4px;
background-image: linear-gradient(white, lightgray);

Not to mention :hover and :active state styling. Why not take the opportunity to come up with a nice custom look that fits your page?

Upvotes: 5

Related Questions