El diseño

El formulario de contacto en un diseño de respuesta tiene campos de entrada tanto con una sombra de inserción y la sombra fuera regular. Ver la imagen a continuación.iPhone iOS no mostrará box-shadow adecuadamente

Input Field Design on Mobile

El Código

input { 
    background:#fff; 
    height:auto; 
    padding:8px 8px 7px; 
    width:100%; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    border:#fff solid 3px; 
    border-radius:4px; 
    box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); 
}

El problema

iOS v4 + no muestra el cuadro de sombras correctamente. Ver la imagen a continuación.

Input box-shadow rendered incorrectly

Probado

He intentado usar webkit-box-shadow.

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), 
        inset 2px 2px 3px rgba(0, 0, 0, .2);

He aplicado display:block; al elemento de entrada.

actual Solución

yo preferiría no tener que hacer esto, pero esta es la única manera que puedo conseguir mi efecto deseado.

HTML

<p><input /></p>

CSS

p { 
    width:50%; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-shadow:0px 0px 5px rgba(0, 0, 0, .35); 
    border-radius:4px; 
} 

    input { 
     background:#fff; 
     height:auto; 
     padding:8px 8px 7px; 
     width:100%; 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     border:#fff solid 3px; 
     border-radius:4px; 
     box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2); 
    }

Incluso con esta solución, la sombra inserción en IOS no se procesa adecuadamente; pero está lo suficientemente cerca.

Mi pregunta

¿Es posible tener varias instancias de la caja-sombra en un solo elemento se muestra correctamente en dispositivos iOS? Si no, ¿qué pasa con la sombra del recuadro? ¿O estoy usando esta propiedad y sus valores incorrectamente?

¡Gracias de antemano!

Fuente

2012-05-25 rebz

Wow, el problema interesante y hemos formateado la pregunta. No sé la respuesta, pero ahora tengo curiosidad, la seguiré. – RLH

Puede valer la pena señalar que probé sin 'box-shadow' y se veía igual. –

130

Intenta agregar -webkit-appearance: none; iOS tiende a confundir formularios.

Fuente

2012-05-25 15:42:53 Alex

¡Eso lo solucionó! Usted señor, tómese una bebida. – rebz

No es un duplicado exacto, pero la respuesta también se dio en esta pregunta: http://stackoverflow.com/questions/3902629/box-shadow-on-an-ipad-safari, simplemente no aceptado. Me alegra que esta respuesta haya sido aceptada aquí. –

Interesante, me adelanté y les di a los chicos una respuesta positiva. – rebz

iPhone iOS no mostrará box-shadow adecuadamente