我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。
任何想法为什么会发生这种情况或我如何覆盖它?