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

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.

Try to include this CSS property on your style:

-webkit-appearance: button;

Hope this helps!

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.

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/

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

I am using several input type="button" and they style ok using:

input[type="button"] {
-webkit-appearance: button;
height:40px;
}

They did not style without the -wbkit- line.

or use the <button> tag. Particletree! Rediscovering the Button Element

It’s an edge case, but if you’re trying all sorts of things and just can’t get Safari to make button labels smaller, you might have activated the “Never use font sizes smaller than X” option in Safari’s preferences:

This snagged me yesterday. Just turn it off and Safari will be much more likely to respect your CSS directives.

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

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