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

javascript form validation submit

Question

Entre otras ayudas visuales y de texto en el envío de un formulario, posterior a 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 los 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.

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?

[edit] Probé 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 importante funcionaría para eso.

Hasta donde puedo decir, no hay otro medio que no sea usar el atributo autocompletar (que parece funcionar).

Answer 1

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

Answer 2

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 3

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

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

Es un pedazo de pastel con jQuery:

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

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

Answer 5

Establezca la propiedad del 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 arreglarse por algo como

:focus { background-color: #fff; }

Answer 6

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 7

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

Answer 8

MEJOR SOLUCIÓN HASTA AHORA (en MENOS)

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

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

Answer 9

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 puedes cambiar el borde como desees:

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

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

Answer 10

Sé que en Firefox puedes 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 usar para un solo elemento

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

... así como para una forma completa

<form autocomplete="off" ...>

Answer 11

Sí, sería un gran dolor de cabeza, que en mi opinión no vale la pena el regreso. 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 12

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

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'');" />

Answer 15

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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