Autocompletar formularios de Google Chrome y su fondo amarillo

Tengo un problema de diseño con Google Chrome y su función de autocompletar formularios. Si Chrome recuerda algún nombre de usuario / contraseña, cambia el color de fondo a amarillo.

Aquí hay algunas capturas de pantalla:

¿Cómo eliminar ese fondo o simplemente deshabilitar este relleno automático?

Cambia "blanco" a cualquier color que desees.

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

Si quieren campos de entrada transparentes, pueden usar la transición y el retraso de transición.

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

Solución aquí :

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

En Firefox puede deshabilitar todo el autocompletado en un formulario utilizando el atributo autocomplete = "off / on". Del mismo modo, los elementos individuales de autocompletar se pueden configurar con el mismo atributo.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Puede probar esto en Chrome, ya que debería funcionar.

Si desea conservar el autocompletado, así como cualquier dato, manejadores adjuntos y funcionalidad adjunta a sus elementos de entrada, pruebe este script:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Sondea hasta que encuentra elementos de autocompletar, los clona incluyendo datos y eventos, luego los inserta en el DOM en la misma ubicación y elimina el original. Detiene el sondeo una vez que encuentra alguno para clonar, ya que el relleno automático a veces tarda un segundo después de cargar la página. Esta es una variación de una muestra de código anterior, pero más robusta y mantiene la mayor funcionalidad intacta posible.

(Se confirmó que funcionaba en Chrome, Firefox e IE 8.)

El siguiente CSS elimina el color de fondo amarillo y lo reemplaza con un color de fondo de su elección. No deshabilita el autocompletado y no requiere jQuery o hacks de Javascript.

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

Solución copiada de: Anular el llenado de formularios del navegador y el resaltado de entrada con HTML / CSS

Funcionó para mí, solo se requiere el cambio de CSS.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

puedes poner cualquier color en lugar de #ffffff .

Un poco hacky pero funciona perfectamente para mi

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

Una combinación de respuestas funcionó para mí.

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Aquí está la versión de MooTools de Jason. También lo arregla en Safari.

window.addEvent('domready',function() { 
    $('username').focus();

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

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

Esto soluciona el problema tanto en Safari como en Chrome.

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Esto me ayudó, una versión solo CSS.

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

donde el blanco puede ser del color que quieras.

Yo uso esto,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

En su etiqueta, simplemente inserte esta pequeña línea de código.

autocomplete="off"

Sin embargo, no coloque esto en el campo de nombre de usuario / correo electrónico / nombre de identificación porque si todavía está buscando usar el autocompletado, lo deshabilitará para este campo. Pero encontré una forma de evitar esto, simplemente coloque el código en su etiqueta de entrada de contraseña porque nunca completa automáticamente las contraseñas de todos modos. Esta solución debería eliminar la fuerza del color, la capacidad de autocompletar matinain en su campo de correo electrónico / nombre de usuario, y le permite evitar hacks voluminosos como Jquery o javascript.

Si desea deshacerse de él por completo, he ajustado el código en las respuestas anteriores para que funcione en hover, active y focus también:

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

Aquí hay una solución de Mootools que hace lo mismo que la de Alessandro: reemplaza cada entrada afectada por una nueva.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

¿Qué pasa con esa solución?

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Desactiva el autocompletado y el autocompletado (por lo que desaparecen los fondos amarillos), espera 100 milisegundos y luego vuelve a activar la funcionalidad de autocompletar sin autocompletar.

Si tienes entradas que necesitan ser autocompletadas, entonces dales auto-complete-onclase css.

Ninguna de las soluciones funcionó para mí, las entradas de nombre de usuario y contraseña todavía se rellenaban y se les daba el fondo amarillo.

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.

Después de que se cargue la página, con javascript puede cambiar 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 permanece apagado.

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

Chrome 34.0.1847.116, OSX 10.7.5

La única forma que me funcionó fue: (se requiere jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Solucioné este problema para un campo de contraseña que tengo así:

Establezca el tipo de entrada en texto en lugar de contraseña

Elimine el valor del texto de entrada con jQuery

Convierta el tipo de entrada a contraseña con jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Una actualización de la solución Arjans. Al intentar cambiar los valores, no te dejaría. Esto funciona bien para mi. Cuando te enfocas en una entrada, se volverá amarilla. Está lo suficientemente cerca.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

Prueba este código:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

La respuesta de tarifa namrouti es correcta. Pero el fondo aún se pone amarillo cuando se selecciona la entrada . Agregando !importantsolucionar el problema. Si quieres también textareay selectcon el mismo comportamiento solo agregatextarea:-webkit-autofill, select:-webkit-autofill

Solo entrada

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

input, select, textarea

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Agregar autocomplete="off"no va a cortarlo.

Cambie el atributo de tipo de entrada a type="search".
Google no aplica el autocompletado a las entradas con un tipo de búsqueda.

Espero que esto te ahorre algo de tiempo.

Si quieres evitar el parpadeo amarillo hasta que se aplique tu CSS, dale una transición a ese chico malo así:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

La solución definitiva:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

<input type="text" name="foo" autocomplete="off" />

Pregunta similar: Enlace

Acabo de encontrarme con la misma pregunta. Esto funciona para mi:

form :focus {
  outline: none;
}