¿Eliminar el color de fondo de entrada para el autocompletado de Chrome?


653

En un formulario en el que estoy trabajando, Chrome completa automáticamente los campos de correo electrónico y contraseña. Esto está bien, sin embargo, Chrome cambia el color de fondo a un color amarillo pálido.

El diseño en el que estoy trabajando utiliza texto claro sobre un fondo oscuro, por lo que esto realmente desordena el aspecto del formulario: tengo cuadros amarillos y texto blanco casi invisible. Una vez que el campo está enfocado, los campos vuelven a la normalidad.

¿Es posible evitar que Chrome cambie el color de estos campos?


2
Aquí tiene información más amplia: stackoverflow.com/questions/2338102/…
desde el

Vea mi respuesta a una publicación similar: stackoverflow.com/a/13691346/336235
Ernests Karlsons

Respuestas:


1170

Esto funciona bien, puede cambiar los estilos del cuadro de entrada, así como los estilos de texto dentro del cuadro de entrada:

Aquí se puede utilizar cualquier color, por ejemplo white, #DDD, rgba(102, 163, 177, 0.45).

Pero transparentno funcionará aquí.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Además, puede usar esto para cambiar el color del texto:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Consejo: No use un radio de desenfoque excesivo en cientos o miles. Esto no tiene ningún beneficio y podría poner la carga del procesador en dispositivos móviles más débiles. (También es cierto para sombras reales, exteriores). Para un cuadro de entrada normal de 20 píxeles de altura, el "radio de desenfoque" de 30 píxeles lo cubrirá perfectamente.


1
En Chrome ahora la hoja de estilo del agente de usuario muestra :-internal-autofill-previewedy :-internal-autofill-selectedpseudoclases en lugar de -webkit-autofill... Misteriosamente, sin embargo, -webkit-autofilltodavía funciona. Yo personalmente no necesitaba el !important.
Andy

No necesitaba los pseudo selectores de
desplazamiento

318

Las soluciones anteriores de agregar un cuadro de sombra funcionan bien para las personas que necesitan un fondo de color sólido. La otra solución de agregar una transición funciona, pero tener que establecer una duración / retraso significará que en algún momento puede volver a aparecer.

Mi solución es usar fotogramas clave en su lugar, de esa manera siempre mostrará los colores de su elección.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Ejemplo de Codepen: https://codepen.io/-Steve-/pen/dwgxPB


Funciona como encanto.
Lalnuntluanga Chhakchhuak

1
¡Esto definitivamente funciona! (Chrome 79)
Lashae

3
Creo que esto es mejor que la respuesta aceptada ... el método de sombra de cuadro es inteligente y funciona, pero cuando un usuario selecciona un valor para autocompletar, el color predeterminado parpadeará brevemente en el campo de entrada, lo que puede ser problemático si sus entradas tienen fondos oscuros. Esta solución no tiene tales problemas. ¡Salud!
skwidbreth

¡Perfecto! ¡Funcionó aún mejor de lo que esperaba!
sdlins

2
Esto funciona para Vuetify 2 especialmente si configurascolor: inherit
Marc

276

Tengo una mejor solucion.

Establecer el fondo en otro color como el siguiente no me resolvió el problema porque necesitaba un campo de entrada transparente

-webkit-box-shadow: 0 0 0px 1000px white inset;

Así que probé algunas otras cosas y se me ocurrió esto:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

77
Impresionante, también necesito un fondo transparente. PD: no olvides el -webkit-text-fill-color: yellow !important;color del texto.
gfpacheco

Esto seguirá mostrando el fondo de autocompletar cuando la entrada se haya ocultado / mostrado con display. Fiddle - Compruébalo
Martin

27
En lugar de establecer el transition-durationridículamente alto, sería mejor establecer el transition-delaylugar. De esa manera, reduce aún más la posibilidad de cualquier cambio en los colores.
Shaggy

El transitionhack funcionará solo si la entrada no se llena automáticamente con una entrada predeterminada registrada por el navegador, de lo contrario, el fondo amarillo seguirá allí.
guari

1
Gran solución ... pero ¿por qué funciona esto? ¿Y por qué la configuración background-colorno funciona? ¡Chrome necesita arreglar esto!
TetraDev 01 de

60

Esta es mi solución, utilicé la transición y el retraso de transición, por lo tanto, puedo tener un fondo transparente en mis campos de entrada.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

66
He establecido una imagen como fondo del campo de entrada, esta solución elimina el tono amarillo, pero la imagen de fondo aún está oculta
Matteo Tassinari

La mejor solución hasta ahora, funciona muy bien con las existentes box-shadowpara la validación
Yoann

Chrome dijo "color 9999s ease-out, background-color 9999s ease-out";que no es una expulsión válida. -webkit-transition: background-color 9999s ease-out;-webkit-text-fill-color: #fff !important;
Usé

1
funcionó pero sin la doble cita para mí;)
Jon

@Yoann, ¿cómo funcionó exactamente con su box-shadowvalidación existente ? En mi caso, debido a esta regla CSS, mi sombra de cuadro rojo personalizado (que indica un error de entrada) se retrasa, lo que hace que el usuario crea que la entrada más reciente no es válida cuando de hecho es buena.
Paul Razvan Berg

50

Esto ha sido diseñado ya que este comportamiento de coloración ha sido de WebKit. Permite al usuario comprender que los datos se han completado previamente. Bug 1334

Puede desactivar el autocompletado haciendo (o en el control de formulario específico:

<form autocomplete="off">
...
</form

O puede cambiar el color del autocompletado haciendo:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Tenga en cuenta que se está rastreando un error para que esto funcione de nuevo: http://code.google.com/p/chromium/issues/detail?id=46543

Este es un comportamiento de WebKit.


22
gracias, pero esa regla CSS del webkit no funciona. La hoja de estilo del agente de usuario siempre anula el color de fondo, incluso con (a) establecido en !importanty (b) dirigido con una ID para mayor especificidad. Parece que Chrome siempre lo va a anular. Eliminar el autocompletado parece funcionar, pero en realidad no es lo que quiero hacer.
DisgruntledGoat

1
Algunas personas tienen el mismo problema, ¿revisaste la publicación del error? code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour

66
Chrome bloquea cualquier intento de CSS para anular ese color amarillo. La configuración autocomplete="off"ciertamente planteará problemas de accesibilidad. ¿Por qué esta respuesta está marcada como correcta de todos modos?
João

2
Esta es una buena solución, pero si está utilizando React, se quejará de que el autocompletado es una propiedad DOM desconocida. Por lo tanto, en realidad es autocompletar (nota en camello).
Tim Scollick

2
Desactivar autocompletar es un truco, no una solución
Paullo

30

Una posible solución por el momento es establecer una sombra interior "fuerte":

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}  

2
Esta es la solución que en realidad está trabajando, no queremos omitir el fondo amarillo sólo algunas veces, como la respuesta aceptada daría como resultado.
davidkonrad

22

prueba esto para ocultar el estilo de autocompletar

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

para los curiosos, el color de fondo no tiene efecto. El -webkit-box-shadow es la parte inteligente que anula el fondo amarillo en Chrome
Geuis

19

Todas las respuestas anteriores funcionaron pero tenían sus fallas. El siguiente código es una amalgama de dos de las respuestas anteriores que funciona a la perfección sin parpadear.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

He establecido una imagen como fondo del campo de entrada, esta solución elimina el tono amarillo, pero la imagen de fondo aún está oculta
Matteo Tassinari

Este es el único que funciona para mí en Chrome 83. El más votado estuvo trabajando hasta Chrome 82.
sdlins

19

HABLAR CON DESCARO A

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

1
Esto realmente funcionó para mí ya que la respuesta aceptada parpadea en un amarillo pálido.
CleoR

mejor solución en mi humilde opinión
Jan Paepke

15

Después de 2 horas de búsqueda, parece que Google todavía anula el color amarillo de alguna manera, pero busqué la solución. Así es. También funcionará para el desplazamiento, enfoque, etc. todo lo que tienes que hacer es agregar! importante para ello.

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

esto eliminará completamente el amarillo de los campos de entrada


11

Agregar un retraso de una hora pausaría cualquier cambio de CSS en el elemento de entrada.
Esto es más mejor que agregar animación de transición o sombra interna.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

10

Además de esto:

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

Es posible que también desee agregar

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

De lo contrario, cuando haga clic en la entrada, el color amarillo volverá. Para el enfoque, si está usando bootstrap, la segunda parte es para el borde resaltado 0 0 8px rgba (82, 168, 236, 0.6);

De tal manera que se verá como cualquier entrada de bootstrap.


10

Tuve un problema en el que no podía usar box-shadow porque necesitaba que el campo de entrada fuera transparente. Es un truco pero CSS puro. Establezca la transición a un período de tiempo muy largo.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

A partir de ahora en el último Chrome 50.xx, ESTÁ funcionando perfectamente bien. ¡Muchas gracias!
vivekkupadhyay

2
En lugar de establecer el transition-durationridículamente alto, sería mejor establecer el transition-delaylugar. De esa manera, reduce aún más la posibilidad de cualquier cambio en los colores.
Shaggy

@ Shaggy gracias, solo lo cambié a un retraso. Mucho más bonito.
Alex

9

Pruebe esto: igual que la respuesta @ Nathan-white anterior con pequeños ajustes.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

Esta es la mejor respuesta después de probar todas las respuestas.
gfcodix

8

Si desea mantener intacta la funcionalidad de autocompletar, puede usar un poco de jQuery para eliminar el estilo de Chrome. Escribí una breve publicación al respecto aquí: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});}

Esta parece ser la mejor solución, aunque bloquea el correo de Kicksend . ¿Alguna idea sobre cómo solucionar esto?
João

Esta no es una buena solución, ya que la contraseña automática de Google Chrome deja de funcionar. Inicialmente, debe completar el nombre y Google Chrome auto llena la contraseña. Sin embargo, una vez que se ejecuta el JavaScript anterior, el nombre se elimina y se configura de nuevo, y se pierde la contraseña de llenado automático
vanval

6

He desarrollado otra solución usando JavaScript sin JQuery. Si le resulta útil o decide volver a publicar mi solución, solo le pido que incluya mi nombre. Disfrutar. - Daniel Fairweather

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

Este código se basa en el hecho de que Google Chrome elimina el estilo Webkit tan pronto como se ingresa texto adicional. Simplemente cambiar el valor del campo de entrada no es suficiente, Chrome quiere un evento. Al centrarnos en cada campo de entrada (texto, contraseña), podemos enviar un evento de teclado (la letra 'a') y luego establecer el valor del texto en su estado anterior (el texto autocompletado). Tenga en cuenta que este código se ejecutará en cada navegador y verificará cada campo de entrada dentro de la página web, ajustándolo de acuerdo a sus necesidades.


bueno, funcionó en su mayor parte ... desafortunadamente borra mi contraseña. Intentando que guarde la contraseña primero y restablecerla después de los bucles for, pero Chrome parece tener algunos problemas con eso. mmmm
Dustin Silk

6

Tengo una solución CSS pura que usa filtros CSS.

filter: grayscale(100%) brightness(110%);

El filtro de escala de grises reemplaza el amarillo con el gris, luego el brillo elimina el gris.

VER CODEPEN


¿Esto no funciona para mí?
Ikechukwu Eze

5

Esto funcionará para entrada, área de texto y selección en estado normal, flotante, de enfoque y activo.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

Aquí está la versión SCSS de la solución anterior para aquellos que trabajan con SASS / SCSS.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

¡Agradable, y gracias por el código SASS!
Bernoulli IT

4

Para aquellos que usan Compass:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

3

¡Me rindo!

Como no hay forma de cambiar el color de la entrada con autocompletar, decido desactivarlos todos con jQuery para los navegadores webkit. Me gusta esto:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

3

Tengo una solución si desea evitar que el autocompletado de google chrome pero sea un poco "machete", simplemente elimine la clase que google chrome agrega a esos campos de entrada y establezca el valor en "" si no necesita mostrar almacenar datos después de la carga.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

3

La solución de Daniel Fairweather (¿ Eliminar el color de fondo de entrada para el autocompletado de Chrome? ) (Me encantaría votar su solución, pero aún necesito 15 repeticiones) funciona muy bien. Hay una gran diferencia con la solución más votada: ¡puedes guardar imágenes de fondo! Pero una pequeña modificación (solo verificación de Chrome)

Y debes tener en cuenta que SOLO funciona en campos visibles !

Entonces, si está utilizando $ .show () para su formulario, debe ejecutar este código después del evento show ()

Mi solución completa (tengo botones de mostrar / ocultar para el formulario de inicio de sesión):

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

Lo siento nuevamente, preferiría que fuera un comentario.

Si lo desea, puedo poner un enlace al sitio donde lo usé.


3

y esto funcionó para mí (Chrome 76 probado)

input:-internal-autofill-selected {
    background-color: transparent;
}

3

Probé casi todas las soluciones anteriores. Nada me funciona. Finalmente trabajé con esta solución. Espero que alguien ayude a esto.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Esto ya no funciona y se copió de CSS Tricks BTW
Bernoulli IT

1
Esto funcionó para mí.
AzizStark

2

Gracias Benjamin!

La solución Mootools es un poco más complicada, ya que no puedo obtener campos usando $('input:-webkit-autofill'), así que lo que he usado es lo siguiente:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

2

Ninguna de las soluciones funcionó para mí, la sombra insertada no funcionará para mí porque las entradas tienen un fondo translúcido superpuesto sobre el fondo de la página.

Así que me pregunté: "¿Cómo determina Chrome qué debe rellenarse automáticamente en una página determinada?"

"¿Busca ID de entrada, nombres de entrada? ¿ID de formulario? ¿Acción de formulario?"

A través de mi experimentación con el nombre de usuario y las entradas de contraseña, solo encontré dos formas que provocarían que Chrome no pudiera encontrar los campos que deberían rellenarse automáticamente:

1) Coloque la contraseña ingresada antes que la entrada de texto. 2) Déles el mismo nombre e identificación ... o ningún nombre e identificación en absoluto.

Después de que se cargue la página, con javascript puede cambiar dinámicamente el orden de las entradas en la página, o dinámicamente darles su nombre e identificación ...

Y Chrome no sabe qué lo golpeó ... ¡el autocompletado está roto!

Hack loco, lo sé. Pero me está funcionando.

Chrome 34.0.1847.116, OSX 10.7.5


2

Desafortunadamente, ninguna de las soluciones anteriores funcionó para mí en 2016 (un par de años después de la pregunta)

Así que aquí está la solución agresiva que uso:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

Básicamente, elimina la etiqueta mientras guarda el valor y lo vuelve a crear, luego vuelve a colocar el valor.


La solución de fareed namrouti funciona bien para mí en Chrome 51.0.2704.106 / OSX 10.11.5.
oens

2

yo uso esto. trabaja para mi. eliminar el fondo amarillo del campo.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

1

Como se mencionó anteriormente, la inserción -webkit-box-shadow para mí funciona mejor.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

También fragmento de código para cambiar el color del texto:

input:-webkit-autofill:first-line {
     color: #797979;
}

1

Esto funcionó para mí:

padding: 5px;
background-clip: content-box;
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.