Take the 2-minute tour ×

Safari has some strange behavior towards box-shadow.

    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
    outline: none;
    -webkit-box-shadow: 0 0 8px #ffffff;
    box-shadow: 0 0 8px #ffffff;

The box-shadow is displayed but as soon as the element gets focus the shadow vanishes completely. Same effect happens if you don't set anything in :focus.

It does work on Desktop-Safari. I'm using iOS 5 beta (iPad), I can't test it on a stable release or other devices.

Does anyone has a solution to this?

share|improve this question
Closely related: iPhone iOS will not display box-shadow properly –  user Apr 14 at 14:17

1 Answer 1

up vote 12 down vote accepted

Use -webkit-appearance: none to override the native look:

    -webkit-appearance: none;
    box-shadow: 0 0 8px #000000;
share|improve this answer
Nope that was just an example. Any way the shadow is not displayed when the input is focused. –  Eliasdx Oct 4 '11 at 20:06
It works fine on iOS4 jsfiddle.net/WH38L –  Duopixel Oct 4 '11 at 20:33
when I set '-webkit-appearance: none;', it works. Thanks. –  Eliasdx Oct 5 '11 at 8:53

Your Answer


