Autocompletar formularios de Google Chrome y su fondo amarillo

245

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:

texto alternativo texto alternativo

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

hsz
fuente
44
También me gustaría ver si hay una respuesta a esto.
Kyle
12
Para el estilo, este color puede ser serio con los elementos de diseño, como el esquema en las etiquetas de entrada en Chrome también, me gustaría más cambiar el color que apagarlo.
Kyle
3
Google parece reconocer este problema hasta cierto punto. Consulte code.google.com/p/chromium/issues/detail?id=46543
MitMaro el
1
Para deshabilitar el autocompletado, puede agregar autocompletar = "off" a su elemento de entrada, por ejemplo, <input type = "text" id = "input" autocomplete = "off">
joe_young
1
Solo una información adicional: esto me mordió cuando tengo un campo de contraseña. Obtuve mis campos resaltados automáticamente (amarillo) y llenos de un valor extraño. Y encontré la solución aquí: zigpress.com/2014/11/22/stop-chrome-messing-forms ... La solución está en la sección que dice "Desactivar Autocompletar Google Chrome" ... agregue campos ocultos.
Cokorda Raka

Respuestas:

282

Cambia "blanco" a cualquier color que desees.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
Alnamrouti Fareed
fuente
44
gran idea. Me quedaría con 50 o 100 cuando sea suficiente (cuadros de entrada de tamaño regular) para evitar posibles golpes de rendimiento en dispositivos más débiles. (Y no hay necesidad de px después de 0)
Frank Nocke
44
Me encanta este truco! Gran pensamiento ... Todos están eliminando el autocompletado. Quería mantener el autocompletado solo para obtener el amarillo feo.
Travis
1
No funciona si tiene imágenes de fondo detrás del campo de entrada, simplemente llene toda el área con blanco. Intenté todas las soluciones en esta página, incluidas las basadas en jquery y no funcionaron para mí, al final tuve que agregar autocompletar = "off" al campo.
Myke Black
19
Para diseñar también el uso del color del texto -webkit-text-fill-color, vea esta pregunta
Erwin Wessels
2
hay un error, quizás no haya cambiado la sintaxis, pero esto funciona ahora:box-shadow: inset 0 0 0 1000px white !important;
Muhammad Umer
49

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;
}
Gísli Freyr Svavarsson
fuente
La mejor solución para mí, ya que los valores de color RGBA no funcionaban -webkit-box-shadow. También elimina la necesidad de dar valores de color para esta declaración: los valores predeterminados aún se aplicarán.
Sébastien el
aún mejor es usar el retraso de transición en lugar de su duración, para no tener una mezcla de color en absoluto
antoine129
bueno, pero por alguna razón tuve que mover esta regla al final del archivo, de lo contrario no funcionó
Igor Mizak
Que lo que buscaba! ¡Gracias!
Akhmedzianov Danilian
43

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);
        });
    });
}
Alessandro Benedetti
fuente
Esto funcionó mientras que la respuesta principal no. Sin embargo, creo que no intentaré cambiar el comportamiento desde a). este es javascript, por lo que hay un segundo entre funciona y no funciona (hasta que se cargue el js) yb). puede confundir al usuario de Chrome que está acostumbrado al comportamiento predeterminado.
TK123
3
Mi Chrome simplemente vuelve a aplicar el amarillo a la nueva entrada :(
Dustin Silk
Por favor no Esto no funcionará con ningún marco JS, solo para sitios web estáticos.
Akhmedzianov Danilian
26

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.

Kinlan
fuente
77
Girar autocomplete="off"no es accesible en estos días.
João
44
Desafortunadamente, esta solución ya no funciona en Chrome.
henrywright
1
Esto es altamente desaconsejado ya que realmente no está resolviendo el problema real aquí. en cambio, está creando uno nuevo al frustrar a los usuarios porque tienen que escribir manualmente sus datos de inicio de sesión (presumiblemente) (si incluso recuerdan lo que eran)
xorinzor
25

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

Jason
fuente
66
Esta fue la única solución que encontré funcionando, sin desactivar el autocompletado.
Xeroxoid
tal vez no sea necesario establecer intervalos, ya que Chrome autocompleta en window.load?
Timo Huovinen
2
Funciona sin eliminar el autocompletado, una solución mucho mejor que las que tienen millones de votos.
Ally
Las otras soluciones no funcionaron para mí, incluso la más votada, pero esta sí. El problema, que es lo contrario de lo que @Timo dijo anteriormente, es que Chrome no se llena automáticamente en window.load. Aunque esto funcionó, un problema es que si no hay elementos -webkit-autofill, el bucle se ejecuta continuamente. Ni siquiera necesita un intervalo para que esto funcione. Simplemente configure un tiempo de espera con quizás un retraso de 50 milisegundos y funcionará bien.
Gavin
16

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

humbads
fuente
No juega bien si el campo tiene varias sombras aplicadas.
Estirar mi competencia el
6

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 .

Milán
fuente
3

Un poco hacky pero funciona perfectamente para mi

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

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>
LeRoy
fuente
Este es el único ejemplo que me funcionó tanto con texto como con fondo en Chrome Versión 53.0.2785.116 m
pleshy el
2

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


    }
});
Confidente
fuente
1
No uses este script. Si no hay elementos autocompletados, el ciclo se ejecutará continuamente a 20 milisegundos. Un intervalo es innecesario. Establezca un tiempo de espera después de window.load en alrededor de 50 milisegundos y eso será suficiente tiempo para eliminar el estilo.
Gavin
2

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);
}
Arjan
fuente
Es lo que me funciona. Pero el ERROR sigue ahí, y como se puede ver, no hay fecha para fijar. code.google.com/p/chromium/issues/detail?id=46543#c22
Eduardo M
Nunca borras tu intervalo. Este es un código descuidado, no lo use.
Gavin
1
En realidad esto no funciona. No puedo escribir nada en las entradas, ya que se clonan constantemente. casi allí ...
Dustin Silk
intente esto var id = window.setInterval (function () {$ ('input: -webkit-autofill'). each (function () {var clone = $ (this) .clone (true, true); $ (this) .after (clon) .remove ();});}, 20); $ ('input: -webkit-autofill'). focus (function () {window.clearInterval (id);});
Dustin Silk
2

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.

Matt Goo
fuente
2

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 */
Bhavesh Gangani
fuente
1

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.

Alex Sarnowski
fuente
1

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;
}
Alex
fuente
1
agregar un !importantes necesario pero gracias, me ayudó mucho.
Polochon
0

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);
    });
}
Y finalmente
fuente
0

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

cryss
fuente
0

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

I a
fuente
0

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

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

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');
Ahmad Ajmi
fuente
No funciona en Chrome. Tan pronto como el campo se convierte en type = password, Chrome lo completa
mowgli
0

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);});
Dustin Silk
fuente
0

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">

Андрій Глущенко
fuente
0

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;
}
Esmerejón
fuente
0

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.

Matas Vaitkevicius
fuente
0

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;
}
Sebastian
fuente
-1

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);
    }
});
Charly Novoa
fuente
-2
<input type="text" name="foo" autocomplete="off" />

Pregunta similar: Enlace

Aditya P Bhatt
fuente
Chrome ignora el autocompletar = "off"
Sven van den Boogaart
Desactivar Autocompletar en Google Chrome: <a href=" browsers.about.com/od/googlechrome/ss/...>
Aditya P Bhatt
-5

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

form :focus {
  outline: none;
}

fuente
3
ese es el contorno del cuadro cuando haces clic en él, no el color de fondo de la entrada autocompletada
Claire