Eliminar la sombra de entrada de iOS


91

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

ejemplo

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

3
Como nota al margen, debe tener cuidado al establecer '-webkit-apariencia' en un inputselector general . Puede causar efectos no deseados en los botones de radio y casillas de verificación.
davidpauljunior

Gracias, lo uso en el elemento
WHITECOLOR

Respuestas:


203

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/


3
Es posible que también desee aplicar estos estilos input[type=password].
Rockallite

1
Esta publicación tiene casi 4 años. ¿Necesita actualizarse?

1
El selector de Safari que se usa actualmente es textarea, input[type="range"], input, input:matches([type="password"], [type="search"]): solo utilícelo y debería funcionar en todos los casos.
da_berni

Para mí solo funcionó cuando apliqué !importantal appearance. También appearancedebería funcionar para selects.
RuiVBoas

30
background-clip: padding-box;

Parece eliminar las sombras también.

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


1
background-clip: padding-box;eliminará la sombra dentro del campo de entrada de texto en iOS. Consulte codepen.io/jstnrs/pen/YXBLVN por ejemplo (asegúrese de abrir la URL en un dispositivo iOS).
jstnrs

3
Esto funciona, pero ¿alguien sabe cómo funciona? Gracias.
Nostalg.io

no funcionó para mí, pero lo -webkit-appearance: none;hizo.
Lefi Tarik

5

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;

4

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.


@BugWhisperer Funciona en iOS 12.4 para mí: codepen.io/receter/pen/ymMzRG ¿Puede proporcionar más detalles?
Andreas Riedmüller

no funcionó para mí, pero background-clip: padding-box !importantfuncionó.
oldboy

@BugWhisperer ¿Puedes comprobar si los ejemplos de codepen.io/receter/pen/ymMzRG funcionan para ti? ¿También puedes probar si background-image: linear-gradient(transparent, transparent) !important;funciona para ti? Me alegraría saber cuál es el problema aquí.
Andreas Riedmüller

Desafortunadamente, acabo de actualizar mi teléfono. todos funcionan en safari y chrome a través de codepen, pero me pregunto si obtendría los mismos resultados si lo probara de forma nativa
oldboy

2

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

-7

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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.