按钮 CSS 样式在 iOS 上不起作用答案

【问题标题】：Button CSS style not working on iOS按钮 CSS 样式在 iOS 上不起作用
【发布时间】：2014-08-05 23:04:51
【问题描述】：

我创建了一个简单的表单。但是，按钮样式在 iOS 上不起作用（Chrome 和 Safari 都不行）。有什么想法吗？

.submit{
    width:100%;
    background:#17AADF;
    color:#fff;
    font-size:12px;
    border:none;
    border-radius:3px;
    padding:16px;
    margin-top:40px;
    cursor:pointer;
}
.submit:hover{
    background:#000;
}

<input type="submit" class="submit" value="Submit" />

【问题讨论】：

我自己解决了，在css中加入一行代码：-webkit-appearance: none;
Styling input buttons for iPad and iPhone 的可能重复项

标签： html ios css button styles

【解决方案1】：

.submit { -webkit-appearance: none; }

jsfiddle：demo

【讨论】：

要针对 iOS 的 Firefox（或任何操作系统）使用 -moz-appearance: none。

【解决方案2】：

请试试这个代码

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

会有帮助的

【讨论】：

【解决方案3】：

我自己尝试了上述方法，但没有成功，

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

很重要，但没用。

然后我偶然发现了这段代码

window.onload = function() {
    if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
        document.body.addEventListener('touchstart', function() {}, false);
    }
}

一旦包含该脚本，以及使用伪元素

:active

改变触摸按钮的 CSS 起作用了。

【讨论】：