tiene regresar rayas raya quitar por poner pantalla inicio cuadros cuadritos control con como centro boton azules azul ios webkit css3 mobile-webkit

ios - regresar - raya azul pantalla ipad



iPhone iOS no mostrarĂ¡ la sombra de cuadro correctamente (1)

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

El diseño

El formulario de contacto en un diseño receptivo tiene campos de entrada con una sombra insertada y una sombra exterior regular. Ver la imagen a continuación.

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); }

La cuestión

iOS v4 + no muestra la sombra de caja correctamente. Ver la imagen a continuación.

Probado

Intenté 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.

Solución actual

Preferiría no tener que hacer esto, pero esta es la única forma en que puedo obtener el 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 insertada en iOS no se procesa correctamente; pero está lo suficientemente cerca.

Mi pregunta

¿Es posible tener múltiples instancias de box-shadow en un solo elemento renderizado correctamente en dispositivos iOS? Si no, ¿qué pasa con la sombra del recuadro? ¿O estoy usando esta propiedad y sus valores incorrectamente?

¡Gracias por adelantado!