iPhone iOS不会正确显示盒子阴影

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设备上正确渲染单个元素上的多个box-shadow实例？如果没有，插入阴影怎么样？或者我是否正确使用此属性及其值？

提前致谢！

Answer 1

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

Answer 2

在尝试在无效输入周围添加方框阴影时（在单击提交之前），我遇到了问题。

使用-webkit-appearance: none;可以工作一段时间，但是我发现chrome复选框现在不见了。

这是我的骇客，它在跨浏览器中或多或少地起作用。 Safari浏览器似乎是新的“互联网浏览器”：-/

input:invalid, select:invalid, textarea:invalid, .invalid {
    background-clip: padding-box; /* Safari fix */
    box-shadow: 0 0 5pt 2pt rgba(255,0,0,.75) !important;
}

select:invalid {
    border: 1px solid red; /* Safari fix */
}

input[type="checkbox"]:invalid{
    background: red; /* Safari fix */
}

input[type="radio"]:invalid{
    background: red; /* Safari fix */
}