Question

如何为OSX-Safari增加原生FORM提交按钮大小？

我希望为其各自的操作系统保留FORM提交按钮的原生外观，同时还要扩大提交按钮的大小。（意思是，不使用图像，自定义边框等。）

使用以下CSS：

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

在Windows上，这会根据需要增加提交按钮大小的高度和宽度...无论浏览器如何（Safari，Firefox，IE，Chrome）。

但是在OSX上 - Safari根本不会增加按钮大小。表单按钮大小保持默认大小。

Answer 1

尝试在您的样式中包含此CSS属性：

-webkit-appearance：button;

希望这有帮助！

Answer 2

Safari的表单按钮非常难以设计（如果不是不可能的话）。

正如其他人所说，身高几乎是不可触碰的。

您可以做的是将字体大小设置为精确的像素大小以调整按钮的大小。

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

这应该使字体更大，按钮也是如此。它确实最大化...你不能只是继续增加字体大小。

Answer 3

按钮的“原生外观”按定义包含固定高度

按钮规格

控件尺寸：   按钮是   常规，小型和迷你型   大小。 按钮的高度为   固定为每个尺寸，但您指定   宽度，取决于长度   您提供的标签文字。如果你   不要指定足够宽的按钮，   端盖剪辑文本。

您想要的不是“原生”，因此必然会涉及自定义图像的创建，或者您可以随时执行此类操作

Answer 4

如果您为按钮应用边框，Safari会放弃它的光泽按钮，您可以随意使用它。

Answer 5

我正在使用多个输入type="button"，并使用以下方式确定样式：

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

如果没有-wbkit-行，他们就没有风格。

Answer 6

Answer 7

这是一个边缘情况，但是如果你正在尝试各种各样的事情并且无法让Safari使按钮标签变小，那么可能会激活“从不使用小于Safari首选项中的X“选项：

screen shot of Safari’s “Advanced” preference pane

这昨天让我抓狂。只需将其关闭，Safari就会更多更可能尊重您的CSS指令。

Answer 8

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

看起来很明显，但您是否尝试过更改元素大小而不是字体大小？