Question

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

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; 
}

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

Answer 2

您可能正在寻找

-webkit-appearance: none;

Safari CSS注意到--webkit-appearance
Mozilla开发者网络的--moz-appearance

Ref Link

iPad输入按钮造型

2 个答案: