Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS safari: (-webkit-)box-shadow on input:focus doesn't work

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?

like image 636
Eliasdx Avatar asked Oct 04 '11 08:10

Eliasdx


1 Answers

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;
}
like image 57
methodofaction Avatar answered Jan 02 '23 08:01

methodofaction