CSS: Safari on Mac doesn't adhere to my Submit Button style

Question

I have applied the following CSS to a FORM submit button:

font:normal 15px helvetica,arial,sans-serif;
padding:6px;

On Windows, regardless of the browser (IE/Firefox/Chrome), this increase the FORM submit button and give the button spacing padding of 6px.

However, on OS X (Mac), the form submit button is not stylized at all. Meaning, the font size is the default and no padding is being applied.

Any idea on how I can make a FORM submit button bigger on OS X (Mac)?

Answer 1

You need to add this to your CSS:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Answer 2

In Safari 4, padding and sizes won't take effect on submit buttons unless you set a background or border. Example:

background: #ccc; /* without this, the other styles won't show up */    
font: normal 15px helvetica,arial,sans-serif;
padding: 6px;

Answer 3

Instead of using <input type="submit" /> use <button type="submit">Submit Text</button>, if I remember correctly, this has much better support for css stylings.