¿Desea eliminar el color de fondo de entrada para la autocompletación 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 liviano sobre un fondo oscuro, así que esto realmente arruina el aspecto del formulario; tengo cuadros amarillos claros y texto blanco casi invisible. Una vez que el campo está enfocado, los campos vuelven a la normalidad.

¿Es posible detener a Chrome cambiando el color de estos campos?

Esto funciona bien. Puede cambiar los estilos del cuadro de entrada y los estilos de texto dentro del cuadro de entrada:

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

Pero transparent no funcionará aquí.

 /* Change the white to any color ;) */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; } 

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 puede poner la carga del procesador en dispositivos móviles más débiles. (También es cierto para las sombras reales, exteriores). Para un cuadro de entrada normal de 20px de altura, 30px ‘radio de desenfoque’ lo cubrirá perfectamente.

Tengo una mejor solucion.

Establecer el fondo en otro color como el siguiente no me solucionó 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; } 

Las soluciones anteriores de agregar una sombra de caja 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 / demora significa que en algún momento puede volver a aparecer.

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

 @-webkit-keyframes autofill { to { color: #666; background: transparent; } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } 

Esta es mi solución, utilicé el retraso de transición y 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 como se diseñó ya que este comportamiento de coloración ha sido de WebKit. Le permite al usuario entender que los datos han sido prellenados. Error 1334

Puede desactivar la función autocompletar haciendo (o en el control de formulario específico:

 
...

O puede cambiar el color del relleno automático haciendo:

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

Tenga en cuenta que se realiza un seguimiento de un error para que funcione nuevamente: http://code.google.com/p/chromium/issues/detail?id=46543

Este es un comportamiento de WebKit.

Una solución posible para 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 perfectamente 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 me da la solución. Está bien. funcionará para el vuelo estacionario, el enfoque, etc. también. todo lo que tiene que hacer es agregarle importancia.

  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

Si deseas mantener la funcionalidad de autocompletar intacta, puedes 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); }); });} 

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 otro modo, cuando haces clic en la entrada, el color amarillo volverá. Para el enfoque, si está utilizando el arranque, la segunda parte es para el borde que resalta 0 0 8px rgba (82, 168, 236, 0.6);

Tal que se verá como cualquier entrada de arranque.

Tuve un problema donde no podía usar box-shadow porque necesitaba que el campo de entrada fuera transparente. Es un poco pirata pero puro CSS. Establezca la transición a una cantidad de tiempo muy larga.

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

Desarrollé 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 de Webkit tan pronto como se ingresa texto adicional. Simplemente cambiando 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 del teclado (la letra 'a') y luego establecer el valor del texto en su estado anterior (el texto llenado automáticamente). Tenga en cuenta que este código se ejecutará en todos los navegadores y comprobará cada campo de entrada dentro de la página web, ajústelo según sus necesidades.

Pruebe esto: lo mismo que la respuesta @ Nathan-white anterior con ajustes menores.

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

Para aquellos que están usando 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); } } } } 

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

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

Tengo una solución si quieres evitar el autocompletado de google chrome pero es un poco “machete”, solo elimina la clase que google chrome agrega a esos campos de entrada y establece el valor en “” si no necesitas 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 la autocompletación de Chrome? ) (Me encantaría recitar su solución, pero todavía necesito 15 repeticiones) funciona realmente bien. Hay una gran diferencia con la solución más actualizada: ¡puede conservar imágenes de fondo! Pero una pequeña modificación (solo cheque de Chrome)

Y debes tener en cuenta que SOLO funciona en los campos visibles .

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

Mi solución completa (tengo botones para 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(); } 

Perdón otra vez, preferiría que fuera un comentario.

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

Esto funcionará para input, textarea y select en normal, hover, focus y estados activos.

 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 están trabajando 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; } } 

Gracias Benjamin!

La solución Mootools es un poco más complicada, ya que no puedo obtener campos usando $('input:-webkit-autofill') , entonces 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 } 

¡Me doy por vencido!

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

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

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

Entonces me pregunté a mí mismo, “¿Cómo determina Chrome qué se debe completar 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 hubo dos formas que encontré que causarían que Chrome no pudiera encontrar los campos que deberían rellenarse automáticamente:

1) Coloque la entrada de contraseña antes de la entrada de texto. 2) Dales el mismo nombre e id … o ningún nombre e id.

Después de cargar la página, con javascript puede cambiar dinámicamente el orden de las entradas en la página, o dinámicamente darles su nombre y su id …

Y Chrome no sabe qué le ocurrió … ¡la función de autocompletar está rota!

Loco pirata, lo sé. Pero está funcionando para mí.

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

Básicamente, elimina la etiqueta mientras guarda el valor, la recrea y luego recupera el valor.

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

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

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

VER CODEPEN

Como mencioné antes, insertar -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 código de fragmento para cambiar el color del texto:

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

Este chico tiene una gran solución usando JS y funciona perfectamente.

Esta es una solución compleja para esta tarea.

 (function($){ if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $('input, select').on('change focus', function (e) { setTimeout(function () { $.each( document.querySelectorAll('*:-webkit-autofill'), function () { var clone = $(this).clone(true, true); $(this).after(clone).remove(); updateActions(); }) }, 300) }).change(); } var updateActions = function(){};// method for update input actions updateActions(); // start on load and on rebuild })(jQuery) 
 *:-webkit-autofill, *:-webkit-autofill:hover, *:-webkit-autofill:focus, *:-webkit-autofill:active { /* use animation hack, if you have hard styled input */ transition: all 5000s ease-in-out 0s; transition-property: background-color, color; /* if input has one color, and didn't have bg-image use shadow */ -webkit-box-shadow: 0 0 0 1000px #fff inset; /* text color */ -webkit-text-fill-color: #fff; /* font weigth */ font-weight: 300!important; } 
    

Simple, solo agregue,

  autocomplete="new-password" 

al campo de contraseña

El agente de usuario de Google Chrome previene el CSS los desarrolladores, por lo que para cambiar la interfaz de usuario de autofill debe usar otra propiedad como esta:

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important; /*use inset box-shadow to cover background-color*/ -webkit-text-fill-color: #ffa400 !important; /*use text fill color to cover font color*/ }