seleccionar - eliminar correos iphone ios 11

Eliminar la sombra de entrada de iOS

Question

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

Quiero eliminar la sombra superior, bug -webkit-appearance no 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;
}

Answer 1

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

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 sobre la appearance aquí:

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

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

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

Answer 2

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;
}

Answer 3

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;

Answer 4

background-clip: padding-box;

Parece eliminar las sombras también.

Como @davidpauljunior mencionó; tenga cuidado de configurar -webkit-appearance en un selector de entrada general.