iPad输入按钮造型

Question

主要在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在各个平台上保持样式一致的任何想法？

Answer 1

你需要-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; 
}

...这样我就能保持浏览器之间的风格一致性.