Why submit button's color changed strangely?

Question

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

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

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.

Answer 1

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?