autocomplete - remove - ¿Eliminar el color de fondo de entrada para Chrome autocompletar?

desactivar autocompletar html

Question

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 es usar texto claro sobre un fondo oscuro, por lo que esto confunde 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 detener Chrome cambiando el color de estos campos?

Answer 1

¡Me doy por vencido!

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

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

Answer 2

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á utilizando bootstrap, la segunda parte es para el resaltado de bordes 0 0 8px rgba (82, 168, 236, 0.6);

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

Answer 3

Agregar una hora de retraso 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;
}

Answer 4

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

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

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

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

Answer 5

Después de 2 horas de búsqueda, parece que Google todavía anula el color amarillo de alguna manera, pero yo busco la solución. Está bien. Funcionará para hover, enfocar, etc. también. 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.

Answer 6

El agente de usuario de Google Chrome impide el CSS los desarrolladores. Por lo tanto, 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*/
}

Answer 7

Esta es mi solución, utilicé la transición y el retardo de transición, por lo que 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;
}

Answer 8

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

Answer 9

Este chico tiene una http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/ usando JS y funciona perfectamente.

Answer 10

Esto funciona bien. Puede cambiar los estilos del cuadro de entrada así como 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, puedes usar esto para cambiar el color del texto:

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

Consejo: No utilice 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 las sombras reales, exteriores). Para una caja de entrada normal de 20px de altura, 30px ''radio de desenfoque'' lo cubrirá perfectamente.

Answer 11

Esto funcionará para entrada, área de texto y selección en estado normal, hover, foco 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;
    }
}

Answer 12

Esto ha sido tal como se diseñó ya que este comportamiento de coloreado ha sido de WebKit. Permite al usuario comprender que los datos han sido previamente rellenados. Bug 1334

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

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

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

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

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

Este es un comportamiento de WebKit.

Answer 13

Gracias Benjamin!

La solución de 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
}

Answer 14

HABLAR CON DESCARO A

input:-webkit-autofill

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

Answer 15

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 enfocarnos 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 completado automáticamente). Tenga en cuenta que este código se ejecutará en todos los navegadores y verificará cada campo de entrada dentro de la página web, y lo ajustará a sus necesidades.

Answer 16

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

Y debes tenerlo en cuenta, ¡ SOLO funciona en campos visibles !

Entonces, si está usando $ .show () para su formulario, necesita 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();
    }

Lo siento de nuevo, preferiría que fuera un comentario.

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

Answer 17

Lamentablemente, 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 al guardar el valor, y la vuelve a crear, luego vuelve a colocar el valor.

Answer 18

Las soluciones anteriores de agregar una sombra de cuadro 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 utilizar fotogramas clave en su lugar, de esa manera siempre mostrará los colores de su elección.

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Answer 19

Ninguna de las soluciones funcionó para mí, la sombra de inserción no funcionará 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é se debe completar automáticamente en una página determinada?"

"¿Busca identificadores 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 podrían hacer que Chrome no pueda encontrar los campos que deben completarse automáticamente:

1) Ponga la entrada de contraseña antes de la entrada de texto. 2) Dales 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 darles su nombre e identificación dinámicamente ...

Y Chrome no sabe qué golpeó ... ¡autocompletar está roto!

Hack loco, lo sé. Pero está funcionando para mí.

Chrome 34.0.1847.116, OSX 10.7.5

Answer 20

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

Answer 21

Prueba esto: igual que @ responde 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;
}

Answer 22

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

Answer 23

Simple, simplemente añada

    autocomplete="new-password"

al campo de contraseña.

Answer 24

Tengo una mejor solucion.

Configurar el fondo a 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é 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;
}

Answer 25

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

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

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

VER CODEPEN

Answer 26

Tengo una solución si desea evitar el autocompletar desde google chrome pero es 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);           
});

Answer 27

Todas las respuestas anteriores funcionaron pero tuvieron sus fallas. El código de abajo es una combinación 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;
}

Answer 28

Tuve un problema en el que no podía usar box-shadow porque necesitaba que el campo de entrada fuera transparente. Es un poco de un hack pero puro CSS. Establecer 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;
}

Answer 29

Una posible solución por el momento es establecer una sombra interna "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;
}  

Answer 30

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