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

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

3

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

y encontré un comentario anterior de las mismas respuestas aquí.

https://stackoverflow.com/a/29750016/9287284

— KABA
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