IOS safari: (-webkit-) box-shadow on input: focus not working

Question

Safari has weird 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;
}

It is displayed box-shadow, but as soon as the element receives focus, the shadow disappears completely. The same effect occurs if you do not set anything in: focus.

It works on Desktop-Safari. I use the beta version of iOS 5 (iPad), I can not test it on a stable version or other devices.

Does anyone have a solution?

Answer 1

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

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