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+不能正确显示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实例？如果不行，那么对于内部阴影呢？或者是我错误地使用了这个属性及其值吗？

提前致谢！

- rebz

---

值得一提的是，我进行了没有“box-shadow”的测试，效果看起来相同。 - Tom Pietrosanti

Answer 1

尝试添加-webkit-appearance: none;，因为iOS通常会搞乱表单。

- Alex

---

不是完全相同的问题，但答案也在这个问题上给出了：https://dev59.com/em865IYBdhLWcg3wQMWW，只是没有被接受。我很高兴这个答案在这里被接受。 - Tom Pietrosanti

请确保在box-shadow之前而非之后放置它。 - Johansrk

大约已经3年了，但是iOS往往会弄乱表单.. 我必须投票支持这个 :'-) 注意：iOS的box-shadow需要3件事。1) 在box-shadow上添加厂商前缀-webkit-box-shadow: ... 2) 设置边框半径，例如1像素 border-radius: 1px 3) 禁用外观 -webkit-appearance: none; - Cagatay Ulubay

添加“-webkit-box-shadow:..”和“-moz-box-shadow:..”将提供最深的浏览器支持。 - Tanner Dolby

Answer 2

在提交之前，我试图为无效的输入框添加一个盒子阴影，但遇到了问题。

使用-webkit-appearance: none;一段时间后效果不错，但我注意到在Chrome浏览器中复选框现在已经消失了。

这是我的hack，可以跨浏览器更或多或少地工作。看起来Safari成为了新的“Internet Explorer” :-/

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 */
}

- antman3351