10

我主要在 iPad 中查看时表单按钮的样式不一致。出于某种原因，CSS 样式适用于 iPad，background-color并且padding不适用于 iPad。我得到了默认的外观按钮，带有渐变和圆角，这不是我想要的。我也想避免使用图像。

CSS

.mailBtn {
  background: #fff;
  border:0;
  color: #000;
  font: 0.625em 'SansPro Light',sans-serif;
  margin: 0 0 0 -3px;
  padding: 11px 7px 10px;
  text-transform: uppercase;
}

HTML

<input type="submit" value="Send" class="mailBtn">

关于如何使用纯 CSS 跨平台保持样式一致的任何想法？

4

2 回答 2

24

您需要-webkit-appearance:none在.mailBtn课堂上使用。此外，如果您在字段中有圆角input，您可以使用-webkit-border-radius:0.

我通常在我的表单元素中重置这两个属性，如下所示：

input, textarea, button {
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;

    -webkit-border-radius: 0; 
}

...这样我就可以保持浏览器之间的样式一致性。

于 2013-07-30T13:45:25.550 回答
3

您可能正在寻找

-webkit-appearance: none;
  • 关于 --webkit-appearance 的 Safari CSS 注释
  • Mozilla 开发者网络的 --moz-appearance

参考链接

于 2013-12-05T13:59:27.900 回答