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

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?

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.

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

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

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

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.

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

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

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

HABLAR CON DESCARO A

input:-webkit-autofill

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

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

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

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.

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

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

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

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.

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

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

¡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');
    });
}

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

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é.

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

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

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

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
}

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

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.

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

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

Esto funcionó para mí:

padding: 5px;
background-clip: content-box;