Question

Safari has some strange behavior towards box-shadow.

input[type="text"]{
    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
}
input[type="text"]:focus{
    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?

Answer 1

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

input[type="text"]{
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px #000000;
}