¿Cómo impido que Chrome deje en color amarillo los cuadros de entrada de mi sitio?

Question

Entre otras ayudas visuales y de texto en el envío de un formulario, después de la validación, estoy coloreando mis cuadros de entrada en rojo para indicar el área interactiva que necesita atención.

En Chrome (y para los usuarios de la barra Google), la función de autocompletar vuelve a colorear mis formularios de entrada en amarillo. Este es el problema complejo: quiero permitir el autocompletado en mis formularios, ya que acelera el inicio de sesión de los usuarios. Voy a verificar la posibilidad de desactivar el atributo autocompletar si/cuando se produce un error, pero es complejo un poco de codificación para desactivar programáticamente el autocompletado para la entrada única afectada en una página. Esto, para decirlo simplemente, sería un gran dolor de cabeza.

Para evitar este problema, ¿hay algún método más simple para evitar que Chrome vuelva a colorear los cuadros de entrada?

[edit] Probé la importante sugerencia a continuación y no tuvo ningún efecto. Todavía no he revisado la barra Google para ver si el atributo importante funcionaría para eso.

Por lo que puedo ver, no hay otro medio que no sea usar el atributo de autocompletar (que parece funcionar).

Answer 1

Sé que en Firefox puede usar el atributo autocomplete = "off" para deshabilitar la funcionalidad de autocompletar. Si esto funciona en Chrome (no se ha probado), puede establecer este atributo cuando se encuentre un error.

Esto se puede utilizar tanto para un solo elemento

<input type="text" name="name" autocomplete="off"> 

... así como para todo el formulario

<form autocomplete="off" ...> 

Answer 2

Si mal no recuerdo, una regla importante en la hoja de estilo para el color de fondo de las entradas anulará la función de autocompletar de la barra de herramientas de Google; presumiblemente lo mismo ocurriría con Chrome.

Answer 3

Sí, sería un gran dolor de cabeza, que en mi opinión no vale la pena la devolución. Tal vez podría modificar un poco su estrategia de IU, y en lugar de colorear el cuadro rojo, podría colorear los bordes rojos, o poner una pequeña cinta roja al lado (como la cinta de Gmail "Cargando") que se desvanece cuando la caja está atención.

Answer 4

Establecer la propiedad de esquema CSS a ninguno.

input[type="text"], input[type="password"], textarea, select { 
    outline: none; 
} 

En los casos en que el navegador puede añadir un color de fondo, así que esto puede ser fijado por algo así como

:focus { background-color: #fff; } 

Answer 5

Mediante el uso de un poco de jQuery puede quitar el estilo de Chrome, manteniendo intacta la funcionalidad de autocompletar .Escribí un breve post sobre ello 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 6

para quitar el borde de todos los campos que puede utilizar lo siguiente:

*:focus { outline:none; }

Para quitar la frontera para determinados campos Basta con aplicar este clase de los campos de entrada que desee:

.nohighlight:focus { outline:none; }

Por supuesto, puede cambiar la frontera como usted desea, así:

.changeborder:focus { outline:Blue Solid 4px; }

(De Bill Beckelman: Override Chrome's Automatic Border Around Active Fields Using CSS)

Answer 7

Con Mootools

function fixchromeyellow() 
{ 
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) 
    { 
     $$('input["input:-webkit-autofill"]').each(function(el) 
     { 
     el.clone().inject(el,"after"); 
     el.destroy(); 
     }); 
    } 
} 

window.setTimeout(fixchromeyellow, 500); 

---

Answer 8

La forma más simple de mi opinión es:

1. Obtener http://www.quirksmode.org/js/detect.html

2. Usar este código:

   if (BrowserDetect.browser == "Chrome") { 
       jQuery('form').attr('autocomplete','off'); 
   }; 
   

Answer 9

input:focus { outline:none; } 

Eso funcionó muy bien para mí, pero lo más probable es mantener las cosas uniforme en su sitio el va a querer también incluir esto en su CSS para áreas de texto:

textarea:focus { outline:none; } 

También puede parecer obvio para la mayoría, excepto por principiantes también se puede establecer a un color como tal:

input:focus { outline:#HEXCOD SOLID 2px ; } 

Answer 10

Es un pedazo de la torta con jQuery:

if ($.browser.webkit) { 
    $("input").attr('autocomplete','off'); 
} 

O si quieres ser un poco más selectivo, añadir un nombre de clase para un selector.

Answer 11

Después de aplicar @Benjamin su solución, descubrí que presionar el botón de retroceso todavía me daría el resaltado amarillo.

Mi solución alguna manera de evitar que esto resaltado amarillo que volver es decir, aplicando la siguiente javascript jQuery:

<script type="text/javascript"> 
    $(function() { 
     if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
     var intervalId = 0; 
      $(window).load(function() { 
       intervalId = setInterval(function() { // << somehow this does the trick! 
        if ($('input:-webkit-autofill').length > 0) { 
         clearInterval(intervalId); 
         $('input:-webkit-autofill').each(function() { 
          var text = $(this).val(); 
          var name = $(this).attr('name'); 
          $(this).after(this.outerHTML).remove(); 
          $('input[name=' + name + ']').val(text); 
         }); 
        } 
       }, 1); 
      }); 
     } 
    }); 
</script> 

creo que sirve cualquiera !!

Answer 12

Esto funciona. Lo mejor de todo es que puedes usar los valores de rgba (el hack de recuadro de la sombra del recuadro no funciona con rgba). Este es un pequeño cambio de la respuesta de @ Benjamin. Estoy usando $ (document) .ready() en lugar de $ (ventana) .load(). Parece funcionar mejor para mí, ahora hay mucho menos FOUC. No creo que existan desventajas al usar $ (document) .ready().

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
    $(document).ready(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 13

esto es exactamente lo que estás buscando!

// Just change "red" to any color 
input:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0px 1000px red inset; 
} 

Answer 14

MEJOR SOLUCIÓN hasta el momento (en menos)

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

    &:hover, 
    &:focus { 
     box-shadow: 0 0 0 1000px white inset; 
    } 
} 

Answer 15

para las versiones de hoy, esto también funciona si se coloca en una de las dos entradas de inicio de sesión. También arregle la versión 40+ y el último problema de Firefox.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />