Eliminar la sombra de entrada de iOS

En iOS (Safari 5) tengo que seguir para el elemento de entrada (sombra interior superior):

Quiero eliminar la sombra superior, el error -webkit-appearanceno se guarda.

El estilo actual es:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Deberá usar -webkit-appearance: none;para anular los estilos predeterminados de IOS. Sin embargo, seleccionar solo la inputetiqueta en CSS no anulará los estilos predeterminados de IOS, porque IOS agrega sus estilos mediante un selector de atributos input[type=text]. Por lo tanto, su CSS necesitará usar un selector de atributos para anular los estilos CSS predeterminados de IOS que han sido preestablecidos.

Prueba esto:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Enlaces Útiles:

Puede obtener más información appearanceaquí:

http://css-tricks.com/almanac/properties/a/appearance/

Si desea obtener más información sobre los selectores de atributos CSS, puede encontrar un artículo muy informativo aquí:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Parece eliminar las sombras también.

Como mencionó @davidpauljunior ; tenga cuidado al configurar -webkit-appearanceun selector de entrada general.

webkit eliminará todas las propiedades

-webkit-appearance: none;

Intente usar la propiedad box-shadow para eliminar la sombra en su elemento de entrada

box-shadow: none !important;

Traté de encontrar una solución que a.) Funcione y b.) Puedo entender por qué funciona .

Sé que la sombra de las entradas (y el borde redondeado de la entrada [tipo = "búsqueda"]) proviene de una imagen de fondo.

Entonces, obviamente, la configuración background-image: nonefue mi primer intento, pero esto no parece funcionar.

La configuración background-image: url()funciona, pero todavía me preocupa tener unurl() . Aunque actualmente es solo un mal presentimiento.

background-clip: padding-box; parece hacer el trabajo también, pero incluso después de leer los documentos "background-clip" no entiendo por qué esto elimina completamente el fondo.

Mi solución favorita:

background-image: linear-gradient(transparent, transparent);

Esto es CSS válido y entiendo cómo funciona.

Si bien la respuesta aceptada es un buen comienzo, como han señalado otros, solo funciona para entradas cuyo typees "text". Hay una gran cantidad de otros tipos de entrada que también se representan como cuadros de texto en iOS, por lo que necesitamos expandir esta regla para tener en cuenta estos otros tipos.

Aquí está el CSS que estoy usando para eliminar los campos de texto de entrada y las áreas de texto de la sombra interna, mientras se conserva el estilo predeterminado para los botones, casillas de verificación, controles deslizantes de rango, menús desplegables de fecha / hora y botones de opción, todos los cuales también se han creado con la <input>etiqueta humilde. .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Esto funciona mejor para mí. Además, significa que no tengo que aplicarlo a cada tipo diferente de entrada (es decir, texto, teléfono, correo electrónico, etc.).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}