iPhone iOS无法正确显示方框阴影 设计

响应式设计上的联系人表单具有带有嵌入阴影和规则外部阴影的输入字段。见下图

---

代码

---

问题 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);

我已经应用了

显示：块到输入元素


当前解决方法
我宁愿不这样做，但这是我能得到我想要的效果的唯一方法

HTML

<p><input /></p>

即使采用这种解决方法，iOS上的插入阴影也无法正确渲染；但是已经够近了


我的问题
是否可以在iOS设备上正确渲染单个元素上的多个长方体阴影实例？如果没有，那么嵌入阴影呢？或者我是否错误地使用了此属性及其值

提前感谢
尝试添加
-webkit外观：无iOS往往会弄乱表单。
我在尝试在无效输入周围添加框阴影时遇到问题（在单击提交之前）

使用
-webkit外观：无在一段时间内运行良好，但我注意到chrome上的复选框现在不见了

这是我的黑客，或多或少可以跨浏览器使用。看来safari是新的“internet explorer”：-/

input:invalid，select:invalid，textarea:invalid，.invalid{
背景剪辑：填充框；/*Safari修复*/
盒影：0 0 5pt 2pt rgba（255,0,0,75）！重要；
}
选择：无效{
边框：1px纯红；/*Safari fix*/
}
输入[type=“checkbox”]：无效{
背景：红色；/*Safari补丁*/
}
输入[type=“radio”]：无效{
背景：红色；/*Safari补丁*/
}


不是完全相同的，但对这个问题也给出了答案：，只是不被接受。我很高兴这个答案在这里被接受。记住把它放在box shadow之前，而不是放在大约3年之后，但是
iOS往往会弄乱表单。。我必须投票支持：“—）注：iOS盒阴影需要3件东西。1） 方框阴影上的供应商前缀
-webkit方框阴影：…
2）边框半径设置，例如1px
边框半径：1px
3）禁用的外观
-webkit外观：无
添加
-webkit-box-shadow:..
和
-moz-box-shadow:..
将提供尽可能深的浏览器支持。可能值得注意的是，我测试时没有使用
box-shadow
，它看起来也一样。
<p><input /></p>

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);
    }