IPhone iOS 不能正确显示盒子阴影

设计

响应式设计的接触式表单具有同时具有插入阴影和规则外阴影的输入域。见下图。

Input Field Design on Mobile

准则

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 + 没有正确显示盒子阴影。

Input box-shadow rendered incorrectly

测试

我尝试使用-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;应用到输入元素。

目前的解决办法

我宁愿不这样做，但这是唯一的方法，我可以得到我想要的效果。

超文本标示语言

<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 设备上正确地在一个元素上渲染多个盒子阴影实例？如果没有，那么插入阴影呢？还是我使用这个属性及其值不正确？

先谢谢你！

48136

小开

我有一个问题，试图添加一个框阴影周围无效的输入(之前点击提交)。

使用 -webkit-appearance: none;工作了一段时间，但我已经注意到在铬复选框丢失现在。

下面是我的黑客技术，它或多或少可以跨浏览器工作，看起来 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 */
}