Estándar

box-shadow en dispositivos iOS

By • On • In codigo, css

Realizando un formulario en HTML para una página web, se producía un comportamiento extraño en dispositivos iOS.

Los campos de texto no mostraban la sombra que le estaba indicando el css.

 

1
2
3
4
5
6

#contactForm input[type="text"] {
width: 250px; background-color:#fff; border:0; padding: 10px;font-size: .7em;
-webkit-box-shadow: 1px 2px 3px #7f7f80; 
-moz-box-shadow: 1px 2px 3px #7f7f80; 
box-shadow: 1px 2px 3px #7f7f80;
}

Para solucionarlo hay que incluir en el css el código necesario para modificar el comportamiento nativo del elemento:

1

-webkit-appearance: none;

El código del ejemplo anterior modificado

1
2
3
4
5
6
7

#contactForm input[type="text"] {
width: 250px; background-color:#fff; border:0; padding: 10px;font-size: .7em;
-webkit-appearance: none;
-webkit-box-shadow: 1px 2px 3px #7f7f80; 
-moz-box-shadow: 1px 2px 3px #7f7f80; 
box-shadow: 1px 2px 3px #7f7f80;
}