IPhone iOS will not display the shadow box correctly

Question

Design

The contact form on a responsive design has input fields with an insert shadow and a regular external 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); } 

---

Problem

iOS v4 + does not display the correct box. See image below.

---

Verified

I tried using -webkit-box-shadow.

 -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); 

I applied display:block; to the input element.

---

Current workaround

I would rather not do this, but this is the only way to achieve the desired effect.

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

Even with this workaround, shadow insertion on iOS does not display properly; but he's close enough.

---

My question

Is it possible for iOS devices to correctly display multiple instances of box shadow on the same item? If not, what about the nested shadow? Or am I misusing this property and its values?

Thanks in advance!

Answer 1

Try adding -webkit-appearance: none; iOS tends to mess up forms.