autocomplete autocomplete="new-password" - ¿Eliminar el color de fondo de entrada para Chrome autocompletar?




“amarillo” chrome: (25)

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?


Answers

Simple, simplemente añada

    autocomplete="new-password"

al campo de contraseña.


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

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

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

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


HABLAR CON DESCARO A

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    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);
    });
});}

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.


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

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.


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

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

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

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.


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

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
}

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

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.


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.


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

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


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

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


Tienes que añadir este atributo:

autocomplete="new-password"

Fuente de enlace: Artículo completo