Eliminar textarea sombra interior en Safari Móvil (iPhone)

De forma predeterminada, parece que Mobile Safari agrega la sombra interior superior a todos los campos de entrada, incluido textarea. ¿Hay alguna manera de eliminarlo?

Es especialmente feo cuando tienes un fondo blanco.

Author: sudo bangbang, 2010-06-17
Source

5 answers

Añadiendo este estilo css: 

-webkit-appearance: none;
 300
Author: Lyon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-20 05:49:31

Al agregar 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 se mantiene la flecha hacia abajo.

 23
Author: Justin Tolchin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-27 23:24:23

Aquí está la solución fácil

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
 13
Author: IqbalBary,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-25 16:40:57

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

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

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

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

 7
Author: TheCrazyProfessor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-17 21:45:20

Establecer las propiedades css background y border 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>
 -30
Author: MTS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-19 08:16:40