iPad 输入按钮样式答案

【问题标题】：iPad input button stylingiPad 输入按钮样式
【发布时间】：2013-07-30 13:15:59
【问题描述】：

主要是在 iPad 中查看时，表单按钮的样式不一致。出于某种原因，background-color 和 padding 的 CSS 样式不适用于 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 跨平台保持样式一致的任何想法？

【问题讨论】：

@otinanai 我不希望另一个服务器请求这样一个简单的问题。

标签： css forms ipad

【解决方案1】：

您需要在 .mailBtn 类中使用 -webkit-appearance:none。另外，如果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; 
}

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

【讨论】：

谢谢！我不知道这个属性。
按钮上还有一个边距/填充。有什么办法解决吗？
只需重置按钮的边距和内边距：button{margin:0; padding:0}

【解决方案2】：

您可能正在寻找

-webkit-appearance: none;

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

Ref Link

【讨论】：