ios - iPhone iOS 无法正确显示 box-shadow

Question

设计

响应式设计中的联系表单的输入字段带有内嵌阴影和常规外阴影。请参见下图。

---

代码

input {
    background:#fff;
    height:auto;
    padding:8px 8px 7px;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:#fff solid 3px;
    border-radius:4px;
    box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}

---

问题

iOS v4+ 无法正确显示框阴影。请参见下图。

---

已测试

我尝试使用 -webkit-box-shadow。

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
                   inset 2px 2px 3px rgba(0, 0, 0, .2);

我已将 display:block; 应用于输入元素。

---

当前的解决方法

我宁愿不必这样做，但这是我可以获得预期效果的唯一方法。

HTML

<p><input /></p>

CSS

p {
   width:50%;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
   border-radius:4px;
}

    input {
        background:#fff;
        height:auto;
        padding:8px 8px 7px;
        width:100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        border:#fff solid 3px;
        border-radius:4px;
        box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2);
    }

即使采用此解决方法，iOS 上的嵌入阴影也无法正确呈现；但已经足够接近了。

---

我的问题

是否可以在 iOS 设备上正确渲染单个元素上的多个框阴影实例？如果不是，那插入的阴影呢？或者我是否错误地使用了该属性及其值？

提前致谢!

Answer 1

尝试添加 -webkit-appearance: none; iOS 往往会弄乱表单。