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

Make an image button. Safari will not style buttons, or checkboxes, or drop down menus, etc.

Answer 2

Styling form controls is very problematic. See this example - while other browsers apply some styles, all the buttons look nearly identical in Safari.

One solution is to use a <div> with the onclick JavaScript attribute. This way you can apply standard CSS normally. I'd recommend starting with a button then using JS to switch in the better-looking code as progressive enhancement.

Answer 3

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 4

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.