iPhone iOS will not display box-shadow properly

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.

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