¿Cómo evito que Chrome amarillee los cuadros de entrada de mi sitio?

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

En Chrome (y para los usuarios de la barra Google), la función de autocompletar cambia el color de mis formularios de entrada en amarillo. Aquí está el problema complejo: quiero que se permita el autocompletado en mis formularios, ya que acelera el inicio de sesión de los usuarios. Voy a comprobar la capacidad de desactivar el atributo de autocompletar si hay un error activado, pero es un proceso complejo. Un poco de codificación para desactivar mediante programación el autocompletado para la entrada única afectada en una página. En pocas palabras, esto sería un gran dolor de cabeza.

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

[editar] Intenté 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! Important funcionaría para eso.

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

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

Esto se puede usar tanto para un solo elemento

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

... así como para un formulario completo

<form autocomplete="off" ...>

Establezca la propiedad de esquema CSS en none.

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

En los casos en que el navegador también puede agregar un color de fondo, esto puede solucionarse mediante algo como

:focus { background-color: #fff; }

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

Al usar un poco de jQuery, puede eliminar el estilo de Chrome mientras mantiene intacta la funcionalidad de autocompletar. 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);
    });
});}

Para eliminar el borde de todos los campos, puede usar lo siguiente:

*:focus { outline:none; }

Para eliminar el borde de los campos seleccionados, simplemente aplique esta clase a los campos de entrada que desee:

.nohighlight:focus { outline:none; }

Por supuesto, también puede cambiar el borde como lo desee:

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

(De Bill Beckelman: anule el borde automático de Chrome alrededor de los campos activos con CSS )

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

Es pan comido con jQuery:

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

O si desea ser un poco más selectivo, agregue un nombre de clase para un selector.

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

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

2. Usa este código:

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

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

Mi solución de alguna manera para evitar que vuelva a aparecer este resaltado amarillo es aplicando el siguiente javascript de 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>

Espero que ayude a cualquiera !!

Esto funciona. Lo mejor de todo es que puede usar valores rgba (el hack de recuadro de sombra no funciona con rgba). Este es un ligero ajuste de la respuesta de @ Benjamin. Estoy usando $ (document) .ready () en lugar de $ (window) .load (). Parece que funciona 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);
        });
    });
};

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

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

input:focus { outline:none; }

Eso funcionó muy bien para mí, pero lo más probable es que mantenga las cosas uniformes en su sitio, también querrá incluir esto en su CSS para áreas de texto:

textarea:focus { outline:none; }

También puede parecer obvio para la mayoría, pero para los principiantes también puede configurarlo en un color como tal:

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

Si no recuerdo mal, una regla importante en la hoja de estilo para el color de fondo de las entradas anulará el autocompletado de la barra de herramientas de Google, presumiblemente lo mismo sería cierto para Chrome.