【问题标题】：iPhone iOS will not display box-shadow properlyiPhone iOS 无法正确显示 box-shadow
【发布时间】：2012-06-01 04:44:12
【问题描述】：

设计

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

代码

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+ 无法正确显示 box-shadow。见下图。

测试

我尝试过使用 -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 实例？如果不是，那么嵌入的阴影呢？还是我错误地使用了这个属性及其值？

提前致谢！

【问题讨论】：

可能值得注意的是，我在没有 box-shadow 的情况下进行了测试，它看起来是一样的。

标签： ios webkit css mobile-webkit

【解决方案1】：

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

【讨论】：

不是完全重复的，但在这个问题上也给出了答案：stackoverflow.com/questions/3902629/…，只是不被接受。我很高兴这个答案在这里被接受了。
记得把它放在 box-shadow 之前，而不是之后
大约。 3 年，但iOS tends to mess up forms .. 我必须对此投赞成票 :'-) 注意：iOS box-shadow 需要 3 件事。 1) box-shadow 上的供应商前缀-webkit-box-shadow: ... 2) 设置边框半径，例如1px border-radius: 1px 3) 禁用外观-webkit-appearance: none;
添加-webkit-box-shadow: .. 和-moz-box-shadow: .. 将提供最深入的浏览器支持。

【解决方案2】：

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

使用-webkit-appearance: none; 有一段时间效果很好，但我注意到chrome 复选框现在不见了。

这是我的 hack，或多或少可以跨浏览器工作。看起来 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 */
}

【讨论】：