Anular el llenado de formularios del navegador y el resaltado de entradas con HTML / CSS

Trick it with a "strong" inside shadow:

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

Agregue esta regla CSS y el color de fondo amarillo desaparecerá. :)

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

<form autocomplete="off">

Casi todos los navegadores modernos respetarán eso.

Después de 2 horas de búsqueda parece que Google Chrome todavía anula el color amarillo de alguna manera, pero encontré la solución. Funcionará para flotar, enfocar, etc. También. Todo lo que tienes que hacer es agregarle !important.

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 color amarillo de los campos de entrada

También puede cambiar el atributo name de los elementos de su formulario para que sea algo generado para que el navegador no lo rastree. SIN EMBARGO firefox 2.x + y Google Chrome parece no tener muchos problemas con eso si la url de la solicitud es idéntica. Intente básicamente agregar un param de solicitud de salt y un nombre de campo de salt para el formulario de registro.

Sin embargo, creo que autocomplete = " off " sigue siendo la mejor solución:)

A veces autocompletar en el navegador sigue autocompletando cuando solo tiene el código en el elemento <form>.

Traté de ponerlo en el elemento <input> también y funcionó mejor.

<form autocomplete="off">  AND  <input autocomplete="off">

El soporte para este atributo sin embargo está cesando, por favor lea https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

Https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Otro trabajo que he encontrado es sacar marcadores de posición dentro de los campos de entrada que sugieren que es un campo de correo electrónico, nombre de usuario o teléfono (es decir. "Su correo electrónico"," Correo electrónico", etc.")

Esto hace que los navegadores no sepan qué tipo de campo es, por lo que no intenta autocompletarlo.

Puede deshabilitar el autocompletado a partir de HTML5 (a través de autocomplete="off"), pero NO PUEDE anular el resaltado del navegador. Usted podría intentar jugar con ::selection en CSS (la mayoría de los navegadores requieren un prefijo de proveedor para que funcione), pero eso probablemente no le ayudará tampoco.

A menos que el proveedor del navegador haya implementado específicamente una forma específica del proveedor de sobrescribirlo, no puede hacer nada acerca de los estilos que ya están destinados a sobrescribir la hoja de estilos del sitio para el usuario. Estos se aplican generalmente después de aplicar sus hojas de estilo e ignorar ! important sobreescribe, también.

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

Si está en el campo de entrada, está tratando de "des-amarillo" ...

1. Establecer un color de fondo con css... digamos #ccc (gris claro).
2. Add value="sometext", que temporalmente llena el campo con "sometext"
3. (opcional) Agrega un poco de javascript para que el "sometext" quede claro cuando vayas a poner el texto real.

Entonces, podría verse así:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

La captura de pantalla a la que enlazaste dice que WebKit está usando el selector input:-webkit-autofill para esos elementos. ¿Has intentado poner esto en tu CSS?

input:-webkit-autofill {
    background-color: white !important;
}

Si eso no funciona, entonces probablemente nada lo hará. Esos campos se resaltan para alertar al usuario de que se han rellenado automáticamente con información privada (como la dirección del usuario) y se podría argumentar que permitir que una página se oculte está permitiendo un riesgo de seguridad.

El elemento form tiene un atributo autocomplete que puede establecer como off. A partir del CSS, la directiva !important después de una propiedad evita que se anule:

background-color: white !important;

Solo IE6 no lo entiende.

Si te malinterpreté, también está la propiedad outline que podrías encontrar útil.

He visto la función de autocompletar de Google Toolbar desactivada con javascript. Podría funcionar con algunas otras herramientas de autocompletar; no se si va a ayudar con los navegadores construidos en autocompletar.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Después de probar muchas cosas, encontré soluciones de trabajo que eliminaban los campos autocompletados y los reemplazaban con duplicados. Para no perder eventos adjuntos, se me ocurrió otra solución (un poco larga).

En cada evento "input", rápidamente asigna eventos "change" a todas las entradas involucradas. Prueba si han sido autocompletados. En caso afirmativo, envíe un nuevo evento de texto que engañará al navegador para que piense que el valor ha sido cambiado por el usuario, lo que permite eliminar el amarillo fondo.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Solución simple de javascript para todos los navegadores:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Clone la entrada, restablezca el atributo y oculte la entrada original. Se necesita tiempo de espera para iPad

Dado que el navegador busca campos de tipo de contraseña, otra solución es incluir un campo oculto al principio de su formulario:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

He leído muchos hilos y he probado muchas piezas de código. Después de reunir todas esas cosas, la única manera que encontré de vaciar limpiamente los campos de inicio de sesión y contraseña y restablecer su fondo a blanco fue la siguiente:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Siéntase libre de comentar, estoy abierto a todas las mejoras si encuentra algunas.

La desactivación de autocompletar no es compatible con los navegadores modernos. La forma más fácil de resolver autocompletar que encontré fue una pequeña pista con HTML y JS. Lo primero que hay que hacer es cambiar el tipo de entrada en HTML de 'contraseña' a 'texto'.

<input class="input input-xxl input-watery" type="text" name="password"/>

El autocompletado se inicia después de cargar la ventana. Está bien. Pero cuando el tipo de su campo no es 'contraseña', el navegador no sabía qué campos debe completar. Por lo tanto, no habrá autocompletar en los campos del formulario.

Después de eso, enlaza el evento focusin a campo de contraseña, por ejemplo. en Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

En onInputPasswordFocusIn, simplemente cambie el tipo de su campo a contraseña, con una simple verificación:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

¡Eso es todo!

UPD: esta cosa no funciona con JavaSciprt deshabilitado

UPD en 2018. También encontré un truco divertido. Establezca el atributo readonly en el campo de entrada y elimínelo en el evento focus. En primer lugar evitar que el navegador de campos de autocompletar, en segundo lugar permitirá a los datos de entrada.

El verdadero problema aquí es que Webkit (Safari, Chrome,...) tiene un error. Cuando hay más de un [formulario] en la página, cada uno con un [input type="text" name="foo" ...] (es decir, con el mismo valor para el atributo 'name'), entonces cuando el usuario regrese a la página el autocompletado se realizará en el campo de entrada del PRIMER [formulario] de la página, no en el [formulario] que se envió. La segunda vez, el SIGUIENTE [formulario] se rellenará automáticamente, y así sucesivamente. Solo [formulario] con un campo de texto de entrada con el MISMO nombre se verá afectado.

Esto debe ser reportado a los desarrolladores de Webkit.

Opera rellena automáticamente la [forma] derecha.

Firefox e IE no se autocompletan.

Así que, repito: esto es un error en Webkit.

¿Por qué no poner esto en su css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Eso debería encargarse de su problema. Aunque plantea un problema de usabilidad porque ahora el usuario no puede ver que el formulario se rellenó automáticamente de la manera en que está acostumbrado.

[editar] Después de publicar esto, vi que ya se había dado una respuesta similar y que comentaste que no funcionaba. No veo por qué porque funcionó cuando lo probé.