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

Question

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

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

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

但是，在OS X（Mac）上，表单提交按钮根本没有风格化。意思是，字体大小是默认值，并且没有应用填充。

如何了解如何在OS X（Mac）上制作更大的FORM提交按钮？

Answer 1

您需要将其添加到CSS：

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

Answer 2

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

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

Answer 3

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

Answer 4

制作图像按钮。 Safari不会设置按钮，复选框或下拉菜单等样式。

Answer 5

样式表单控件非常有问题。请参阅this example - 当其他浏览器应用某些样式时，所有按钮在Safari中看起来几乎相同。

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