iPad输入按钮造型

2013-07-30 77 views 8 likes

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

来源

2013-07-30 Babis Sougias

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

回答

您需要在您的.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; 
}

...所以，我保持浏览器之间的风格的一致性。

来源

2013-07-30 13:45:25 otinanai

谢谢！我不知道这个属性。 –

按钮上还有一个边距/填充。任何方式来解决这个问题？ –

只是重置按钮的边距和填充：'button {margin：0;填充：0}' – otinanai

你可能会寻找

-webkit-appearance: none;

Safari浏览器CSS便签--webkit出场
Mozilla开发者网络的--moz出场

Ref Link

来源

2013-12-05 13:59:27

iPad输入按钮造型

回答

相关问题