iPhone iOS will not display box-shadow properly - ios

Question

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.
Tested
I have attempted 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 have applied display:block; to the input element.
Current Workaround
I would prefer not having to do this, but this is the only way I can get my 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, the inset shadow on iOS is not rendered properly; but it's close enough.
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?
Thanks in advance!

Answer 1

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

Answer 2

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.
Here's my hack that works more or less cross browser. Looks like safari is the new "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 */
}