CSS iPhone iOS 无法正确显示 box-shadow
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10757146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone iOS will not display box-shadow properly
提问by rebz
The Design
该设计
The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below.
响应式设计上的联系表单具有带有插入阴影和常规外部阴影的输入字段。见下图。
The Code
编码
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);
}
The Issue
问题
iOS v4+ does not display the box-shadow properly. See image below.
iOS v4+ 无法正确显示 box-shadow。见下图。
Tested
已测试
I have attempted using -webkit-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);
I have applied display:block;to the input element.
我已应用于display:block;输入元素。
Current Workaround
当前的解决方法
I would prefer not having to do this, but this is the only way I can get my desired effect.
我宁愿不必这样做，但这是我获得理想效果的唯一方法。
HTML
HTML
<p><input /></p>
CSS
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);
}
Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough.
即使采用这种解决方法，iOS 上的插入阴影也无法正确呈现；但它已经足够接近了。
My Question
我的问题
Is it possible to have multiple instances of box-shadow on a single element render properly on iOS devices? If not, what about the inset shadow? Or am I using this property and its values incorrectly?
是否可以在 iOS 设备上正确渲染单个元素上的多个 box-shadow 实例？如果没有，插入阴影呢？或者我是否错误地使用了这个属性及其值？
Thanks in advance!
提前致谢！
回答by Alex
Try adding -webkit-appearance: none;iOS tends to mess up forms.
尝试添加-webkit-appearance: none;iOS 往往会弄乱表单。
回答by antman3351
I had a problem trying to add a box-shadow around invalid inputs (before submit is clicked).
我在尝试在无效输入周围添加框阴影时遇到问题（在单击提交之前）。
Using -webkit-appearance: none;worked fine for a while, but I've noticed on chrome checkboxes have gone missing now.
使用-webkit-appearance: none;一段时间后效果很好，但我注意到 chrome 复选框现在不见了。
Here's my hack that works more or less cross browser. Looks like safari is the new "internet explorer" :-/
这是我的黑客或多或少跨浏览器。看起来 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 */
}
