Why submit button's color changed strangely?
css, html
Solution
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?
Problem
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.