CSS：Mac 上的 Safari 不符合我的提交按钮样式答案

【问题标题】：CSS: Safari on Mac doesn't adhere to my Submit Button styleCSS：Mac 上的 Safari 不符合我的提交按钮样式
【发布时间】：2009-11-05 16:35:59
【问题描述】：

我已将以下 CSS 应用于 FORM 提交按钮：

font:normal 15px helvetica,arial,sans-serif;
padding:6px;

在 Windows 上，无论使用哪种浏览器（IE/Firefox/Chrome），这都会增加 FORM 提交按钮，并为按钮间距填充 6px。

但是，在 OS X (Mac) 上，表单提交按钮根本没有样式化。意思是，字体大小是默认值，没有应用填充。

关于如何在 OS X (Mac) 上使 FORM 提交按钮更大的任何想法？

【问题讨论】：

标签： css macos

【解决方案1】：

您需要将此添加到您的 CSS：

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

【讨论】：

【解决方案2】：

在 Safari 4 中，填充和大小不会对提交按钮生效，除非您设置了背景或边框。示例：

background: #ccc; /* without this, the other styles won't show up */    
font: normal 15px helvetica,arial,sans-serif;
padding: 6px;

【讨论】：

【解决方案3】：

如果我没记错的话，不要使用<input type="submit" />，而是使用<button type="submit">Submit Text</button>，这对css样式有更好的支持。

【讨论】：

【解决方案4】：

制作一个图片按钮。 Safari 不会设置按钮、复选框或下拉菜单等样式。

【讨论】：

【解决方案5】：

样式化表单控件是很成问题的。请参阅this example - 虽然其他浏览器应用了一些样式，但所有按钮在 Safari 中看起来几乎相同。

一种解决方案是使用带有onclick JavaScript 属性的<div>。这样您就可以正常应用标准 CSS。我建议从一个按钮开始，然后使用 JS 切换到更好看的代码作为渐进增强。

【讨论】：