6

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

代码也是,

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 上,这个按钮真的很可怕。我将包含移动视图外观的图像和站点的 url。

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


查特菲尔德钻井现场

提交按钮问题

4

2 回答 2

14

您可能正在寻找:

-webkit-appearance: none;
于 2013-12-17T17:01:44.250 回答
4

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

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

input {
    -webkit-border-radius:0; 
}
于 2013-12-17T17:15:49.790 回答