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

问题:

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.

回答1:

Try to include this CSS property on your style:

-webkit-appearance: button;

Hope this helps!

回答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.

回答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/

回答4:

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

回答5:

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.

回答6:

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

回答7:

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.

回答8:

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

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