css - iPad 输入按钮样式

Question

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

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 跨平台保持样式一致有什么想法吗？

Answer 1

您需要在 .mailBtn 类中使用 -webkit-appearance:none。此外，如果您在 input 字段有圆 Angular ，您可以使用 -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; 
}

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