CSS: How to increase the size of a OSX submit button

Question

How do I increase the native FORM submit button size for OSX-Safari?

I want to keep the native look of a FORM submit button for it's respective operating system while also enlarging the size of the submit button. (Meaning, no use of images, custom borders etc..)

Using the following CSS:

input.submitbutton {font-size:150%;}

On Windows, this increase the submit button size height and width as desired ... regardless of the browser (Safari, Firefox, IE, Chrome).

But on OSX - Safari does not increase the button size at all. The form button size remains the default size.

Answer 1

input.submitbutton{
    width:200px;
    height:500px;
}

Seems obvious, but have you tried changing the element size instead of the font size?

Answer 2

Safari's form buttons are notoriously hard to style (if not impossible).

As others have said, height is pretty much untouchable.

What you can do is set the font size to an exact pixel size to resize the button.

input.submitbutton {font-size:14px;}

That should make the font size larger and the button as well. It does max out though...you can't just keep increasing the font size.

Answer 3

The "native look" of a pushbutton includes a fixed height by definition

Push Button Specifications

Control sizes: Push buttons are available in regular, small, and mini sizes. The height of a push button is fixed for each size, but you specify the width, depending on the length of the label text you supply. If you don’t specify a wide enough button, the end caps clip the text.

What you want would not be "native" and therefore will necessarily involve the creation of a custom image, or you can always do something like this

http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/

Answer 4

Try to include this CSS property on your style:

-webkit-appearance: button;

Hope this helps!

Answer 5

If you apply a border to the button, Safari abandons it's glossy button and you can do what you like with it.