iOS safari: (-webkit-)box-shadow on input:focus doesn't work
-
06-02-2021 - |
Pergunta
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?
Solução
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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow