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

Question

Entre otro texto y ayudas visuales en el envío de un formulario, después de la validación, estoy coloreando 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 a amarillo. Aquí está el problema complejo: quiero que se complete la función de autocompletar en mis formularios, ya que acelera el inicio de sesión de los usuarios. Comprobaré la capacidad de desactivar el atributo de autocompletar si hay un error activado, pero es un problema complejo. bit de codificación para desactivar automáticamente la autocompletar de la única entrada afectada en una página. Esto, para decirlo simplemente, sería un gran dolor de cabeza.

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

[editar] Intenté la sugerencia importante 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 el uso del atributo autocompletar (que parece funcionar).

Answer 1

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

Esto se puede usar para un solo elemento

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

... así como para un formulario completo

<form autocomplete="off" ...>

Answer 2

Establezca la propiedad de esquema CSS en ninguna.

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

En los casos en los que el navegador puede agregar un color de fondo, esto se puede solucionar con algo como

:focus { background-color: #fff; }

Answer 3

¡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 4

Al usar un poco de jQuery, puedes eliminar el estilo de Chrome manteniendo intacta la funcionalidad de autocompletar. Escribí una breve publicación al respecto aquí: http://www.benjaminmiles.com/2010 / 11/22 / fixting-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 5

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

*: focus {outline: none; }

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

.nohighlight: focus {outline: none; }

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

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

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

Answer 6

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

Answer 7

Es un pedazo de pastel con jQuery:

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

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

Answer 8

La forma más sencilla 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');
   };
   

Answer 9

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

Mi solución de alguna manera para evitar que este resaltado amarillo regrese es mediante la aplicación del siguiente jQuery javascript:

<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 alguien !!

Answer 10

Esto funciona. Lo mejor de todo es que puedes usar los valores rgba (el corte de recuadro de la sombra de la caja no funciona con rgba). Este es un pequeño pellizco de la respuesta de @ Benjamin. Estoy usando $ (document) .ready () en lugar de $ (window) .load (). Parece funcionar mejor para mí, ahora hay mucho menos FOUC. No creo que haya y 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 11

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 arregla la versión 40+ y el último problema de Firefox.

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

Answer 12

input:focus { outline:none; }

Eso me funcionó muy bien, pero es muy probable que mantengas las cosas uniformes en tu sitio. También querrás incluir esto en tu CSS para áreas de texto:

textarea:focus { outline:none; }

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

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

Answer 13

Si recuerdo correctamente, una regla importante en la hoja de estilo para el color de fondo de las entradas reemplazará el autocompletado de la barra de herramientas de Google, probablemente lo mismo se aplicaría a Chrome.