iphone - que - mobile safari premios

Elimina la sombra interna de textarea en Mobile Safari(iPhone)

Question

De forma predeterminada, parece que Mobile Safari agrega la sombra interna superior a todos los campos de entrada, incluido textarea. ¿Hay un modo de quitarlo?

Es especialmente feo cuando tienes un fondo blanco.

Answer 1

A veces puede tener una hoja de estilo que rompió la appearance: none; entonces, una forma de arreglarlo cuando eso sucede es usar el caret . La mejor manera será reescribir el código y descubrir qué parte de él codifica para desordenar el estilo.

Antes de usar carat necesita saber que puede ocasionarle problemas con otros estilos

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

NOTA: Use none , caret no es lo óptimo.

Answer 2

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 mantienes la flecha hacia abajo.

Answer 3

Al agregar este estilo css:

-webkit-appearance: none;

Answer 4

Aquí está la solución fácil

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

Answer 5

Establecer border propiedades background y border css de la etiqueta de 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>