iPhone iOS will not display box-shadow properly
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 */}
