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


151

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


1
Esto no es solo un problema en Chrome. La barra Google para otros navegadores hace el mismo "amarillamiento" de los campos de entrada.
Carlton Jenke

2
Le proporcioné una respuesta que funciona a continuación.
John Leidegren 01 de

8
No entiendo por qué todos están hablando del esquema: ninguno, la pregunta es sobre el fondo amarillo, NO el esquema. Y el atributo de autocompletado establecido en desactivado NO solucionará el problema, ya que Davebug dijo que quiere que el autocompletado funcione, pero no el fondo amarillo.

Respuestas:


74

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

"Voy a comprobar la capacidad de desactivar el atributo de autocompletar si hay un error activado, pero es una codificación compleja desactivar automáticamente el autocompletado para la entrada única efectuada en una página".
Dave Rutledge

Je ... sí, gracias, aunque supongo que todavía necesito registrarme en Chrome, ¿verdad?
Dave Rutledge

2
para personas que usan rieles de forma simple<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
carbonr

lamento decir que esto no me ayudó
M.Islam

136

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

9
¿Antecedentes? ¿No sabía que Chrome también agregó un color de fondo? Si es así, eso se puede solucionar con algo como:focus { background-color: #fff; }
John Leidegren

Eliminar el esquema con CSS podría evitar el amarillamiento, pero no evitará el autocompletado real. Si desea hacer eso, es importante utilizar el atributo de autocompletar, no estándar o no.
Tom Boutell

2
@pestaa correcto, esta no es la respuesta correcta, pero ciertamente resuelve un problema similar
David Lawson

Tenga cuidado cuando trabaje con tabletas y otras cosas, el navegador predeterminado de Android es un poco difícil de usar sin el esquema. Aunque es bastante fácil de aplicar a navegadores que no son móviles :)
Tim Post

Una pequeña mejora: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
Felipe Lima

56

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

Este es un gran truco. Gracias
Jason

También agregaría enfoque a eso: Dinput:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
StephanieQ

hola @JStormThaKid, usé esto ... pero no funcionó para las entradas correctas ... por favor responda esto ...
mithu

¡Gracias por responder la pregunta que realmente hizo! Casi había comenzado a perder la esperanza.
BVernon

La mejor respuesta aquí, todavía quería autocompletar google, así que gracias
Spangle

14

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

¡Gracias por la pista! Sin embargo, después de publicar el formulario, haciendo clic en el botón Atrás, volvió a aparecer el resaltado amarillo. He extendido tu fragmento (mira mi respuesta) para cubrir esto.
321X

+1 @Benjamin buena solución, parpadea un poco el amarillo pero se arregla al final;)
itsme

7

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 )


2

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.


1

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.



1

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


1

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

1

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

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

-1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.