Eliminar la sombra interior de textarea en Mobile Safari (iPhone)

Question

De forma predeterminada, parece que Mobile Safari agrega la sombra interior superior a todos los campos de entrada, incluido el área de texto. ¿Hay un modo de quitarlo?

Es especialmente feo cuando tienes un fondo blanco.

Answer 1

Mediante la adición de este estilo css:

-webkit-appearance: none; 

Answer 2

se coloca cualquiera de background y border propiedades CSS de la etiqueta input también parece funcionar.

Prueba esto:

<style> 
input { 
    background: #ccc; 
    border: none; 
} 
</style> 

<form> 
First name: <input type="text"/><br /> 
Last name: <input type="text" /> 
</form> 

Answer 3

Mientras que la adición al estilo CSS

-webkit-appearance: none; 

va a funcionar, se deshace de todo. Es posible que desee probar este lugar:

box-shadow: none !important; 

De esta manera se mantiene la flecha hacia abajo.

Answer 4

A veces puede tener una hoja de estilo allí rompió el appearance: none; por lo que una manera de solucionarlo cuando eso sucede es usar caret. La mejor manera será volver a escribir el código y averiguar qué parte de su código no estropear el estilo para none

Antes de utilizar carat lo que necesita saber que se puede obtener algunos problemas con otros estilos

-webkit-appearance: caret; 
    -moz-appearance: caret; 
    -o-appearance: caret; 
     appearance: caret; 

NOTA: Utilice none, caret no es el óptimo.

Answer 5

Aquí es la solución fácil

input[type=text] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
}