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.

Input Field Design on Mobile

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.

Input box-shadow rendered incorrectly

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!

May be worth noting that I tested without the `box-shadow` and it looked the same. — Tom Pietrosanti, May 25 '12 at 15:51

score 213 · Accepted Answer · edited May 25 '12 at 18:01

213

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

edited May 25 '12 at 18:01

rebz

2,053
3
16
16

answered May 25 '12 at 15:42

Alex

2,312
1
14
5

Not an exact duplicate, but the answer was also given on this question: http://stackoverflow.com/questions/3902629/box-shadow-on-an-ipad-safari, just not accepted. I'm glad this answer was accepted here. – Tom Pietrosanti May 25 '12 at 15:50
11

and remember to put it before box-shadow, not after – Johansrk May 19 '14 at 12:41
8

It's been approx. 3 years, but `iOS tends to mess up forms` .. I have to vote this up :'-) Note: iOS box-shadow will need 3 things. 1) Vendor Prefix on the box-shadow `-webkit-box-shadow: ...` 2) Border Radius set, example to 1px `border-radius: 1px` 3) disabled appearance `-webkit-appearance: none;` – Cagatay Ulubay Jan 19 '16 at 11:20
Adding `-webkit-box-shadow: ..` and `-moz-box-shadow: ..` will provide the deepest possible browser support. – Tanner Dolby Nov 16 '20 at 05:35

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

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