iphone在输入上覆盖我的所有样式[type =“submit”]

Question

我已在此JSFIDDLE中隔离了我的input[type="submit"]。

代码，

input[type="submit"] {
    width: 100%;
    height: 40px;
    background: #FFD100;
    border-radius: 5px;
    box-shadow: 0 5px 0 #A58B1E;
    border: none;
    font-size: 20px;
    color: #2b2b2b;
    cursor: pointer;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

input[type="submit"]:active, input[type="submit"]:focus {
    box-shadow: 0 3px 0 #A58B1E;
    top: 2px;
    outline: none;
}

当我在iphone上查看网站时，一切看起来都很棒。由于我的客户想要一个响应式网站，我认为我制作的这个按钮在每台设备上看起来都很棒。

哦，小伙子，我错了，因为在我的iphone上按钮真是太可怕了。我将图像包含在移动视图的外观和网站的网址中。

为什么会发生这种情况或我如何覆盖它的任何想法？

---

（Chatfield Drilling Live Site）

Answer 1

您可能正在寻找：

-webkit-appearance: none;

Answer 2

您需要在按钮中使用-webkit-appearance:none。

此外，如果您在输入字段中有圆角，则可以使用以下CSS：

input {
    -webkit-border-radius:0; 
}