Eliminar textarea inner shadow en Mobile Safari (iPhone)

152

Por defecto, parece que Mobile Safari agrega la sombra interna 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.

iphone mobile mobile-safari Lyon
fuente

Respuestas:

340

Al agregar este estilo CSS:

-webkit-appearance: none;
Lyon
fuente
26
tenga cuidado al agregar esta propiedad en la casilla de verificación de tipo de entrada y en los selectores de botones de radio, ya que oculta las casillas de verificación y los botones de radio;)
Zain Shaikh
14
Gracias por la respuesta Lyon. Por cierto, la mejor manera de usarlo es aplicarlo solo a textarea, input[type="text"], input[type="submit"].
jgthms
8
No te olvides input[type="password"]también.
Nick Pyett
77
¡No te olvides [type="email"]también!
Willster
35
Puede ser más fácil usar el operador no dependiendo de los tipos de entrada que esté usando:input:not([type=checkbox]):not([type=radio])
Justin Fisher
30

Mientras agrega el estilo CSS

-webkit-appearance: none;

funcionará, se deshace de todo. Es posible que desee probar esto en su lugar:

box-shadow: none !important;

De esta manera mantienes la flecha hacia abajo.

Justin Tolchin
fuente
66
Simplemente agregar la propiedad de cuadro de sombra no funciona. La sombra interna todavía aparece en Safari en iOS.
silentmouth
22

Aquí está la solución fácil.

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

A veces puede tener una hoja de estilo allí rota, appearance: none;por lo que es una forma de solucionarlo cuando eso sucede caret. La mejor manera será reescribir su código y descubrir qué es parte de su código, lo que arruina el estilonone

Antes de usarlo caret, debe saber que puede causarle problemas con otros estilos

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

NOTA: El uso none, caretno es el óptimo.

TheCrazyProfessor
fuente
-31

Establecer cualquiera de las propiedades backgroundy bordercss de la inputetiqueta 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>
MTS
fuente
9
Incorrecto y engañoso. Pruebe su código en el dispositivo correcto antes de publicar ...
Ariel
Respuesta realmente incorrecta, nada de eso es lo que pregunta OP
Jacta