8

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.

Marty
  • 39,033
  • 19
  • 93
  • 162
Milad R
  • 1,854
  • 9
  • 25
  • 36
  • 3
    Default button is styled by the browser. Once you add any CSS it removes its button. You'll need to code it all yourself with border, background gradient and hover – Onimusha Jul 14 '14 at 04:02

2 Answers2

5

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?

rvighne
  • 20,755
  • 11
  • 51
  • 73
  • 1
    Worthy of mentioning is that its same issue as with Upload button. It is not only browser specific issue as style for this buttons usually come [from OS](http://www.456bereastreet.com/lab/form_controls/buttons/). For some reason people had more issues with Upload than Submit, so searching for it yields [better results](http://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button) (more often you will see Upload hidden and covered with normal button). – PTwr Jul 14 '14 at 07:38
-3

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.

user229044
  • 232,980
  • 40
  • 330
  • 338
Chris Sobolewski
  • 12,819
  • 12
  • 63
  • 96