CSS：如何增加 OSX 提交按钮的大小答案

【问题标题】：CSS: How to increase the size of a OSX submit buttonCSS：如何增加 OSX 提交按钮的大小
【发布时间】：2009-11-05 18:17:13
【问题描述】：

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

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

使用以下 CSS：

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

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

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

【问题讨论】：

【解决方案1】：

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

-webkit-外观：按钮；

希望这会有所帮助！

【讨论】：

【解决方案2】：

众所周知，Safari 的表单按钮很难设置样式（如果不是不可能的话）。

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

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

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

这应该使字体大小和按钮变大。不过它确实是最大的……你不能只增加字体大小。

【讨论】：

【解决方案3】：

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

按钮规格

控制尺寸：按钮是提供普通、小型和迷你尺寸。 按钮的高度是为每个尺寸固定，但您指定宽度，取决于长度您提供的标签文本。如果你没有指定足够宽的按钮，端盖剪辑文本。

您想要的不是“原生”，因此必然涉及创建自定义图像，或者您总是可以这样做

【讨论】：

【解决方案4】：

如果您为按钮应用边框，Safari 会放弃它的光泽按钮，您可以用它做任何您喜欢的事情。

【讨论】：

【解决方案5】：

我正在使用多个输入 type="button"，它们的样式可以使用：

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

如果没有 -wbkit- 行，他们就没有样式。

【讨论】：

【解决方案6】：

【讨论】：

【解决方案7】：

这是一个边缘案例，但如果您尝试了各种方法，但无法让 Safari 缩小按钮标签，您可能已激活“永远不要使用小于Safari 偏好设置中的 X”选项：

昨天这件事抓住了我。只需将其关闭，Safari 就会更多尊重您的 CSS 指令。

【讨论】：

【解决方案8】：

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

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

【讨论】：