Jak zapobiec żółknięciu pól wejściowych mojej witryny w przeglądarce Chrome?

Wśród innych pomocy tekstowych i wizualnych przy przesyłaniu formularza, po weryfikacji, koloruję moje pola wprowadzania na czerwono, aby zaznaczyć, że interaktywny obszar wymaga uwagi.

W przeglądarce Chrome (i dla użytkowników paska narzędzi Google Toolbar) funkcja automatycznego wypełniania zmienia kolor moich formularzy na żółty. Oto złożony problem: chcę, aby autouzupełnianie było dozwolone w moich formularzach, ponieważ przyspiesza logowanie użytkowników. Zamierzam sprawdzić możliwość wyłączenia atrybutu autouzupełniania, jeśli / kiedy pojawi się błąd, ale jest to złożone kodowania, aby programowo wyłączyć autouzupełnianie dla pojedynczego wejścia na stronie, na które ma to wpływ. Mówiąc prościej, byłby to duży ból głowy.

Aby więc uniknąć tego problemu, czy istnieje prostsza metoda powstrzymania Chrome przed ponownym kolorowaniem pól wprowadzania?

[edytuj] Wypróbowałem! ważną sugestię poniżej i nie przyniosła ona żadnego skutku. Nie sprawdziłem jeszcze paska narzędzi Google Toolbar, aby sprawdzić, czy atrybut! Important będzie działał w tym przypadku.

O ile wiem, nie ma innego sposobu niż użycie atrybutu autouzupełniania (który wydaje się działać).

Wiem, że w Firefoksie można użyć atrybutu autocomplete = "off", aby wyłączyć funkcję autouzupełniania. Jeśli to działa w Chrome (nie zostało przetestowane), możesz ustawić ten atrybut w przypadku napotkania błędu.

Można to zastosować zarówno do pojedynczego elementu

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

... jak również dla całego formularza

<form autocomplete="off" ...>

Ustaw właściwość CSS outline na none.

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

W przypadkach, w których przeglądarka może również dodać kolor tła, można to naprawić za pomocą czegoś takiego

:focus { background-color: #fff; }

to jest dokładnie to, czego szukasz!

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

Używając trochę jQuery, możesz usunąć styl Chrome, zachowując nienaruszoną funkcję autouzupełniania. Napisałem o tym krótki post tutaj: 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);
    });
});}

Aby usunąć obramowanie ze wszystkich pól, możesz użyć:

*:focus { outline:none; }

Aby usunąć obramowanie dla wybranych pól, po prostu zastosuj tę klasę do wybranych pól wejściowych:

.nohighlight:focus { outline:none; }

Możesz oczywiście zmienić granicę, jak chcesz:

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

(Od Billa Beckelmana: Zastąp automatyczną ramkę Chrome wokół aktywnych pól za pomocą CSS )

Tak, byłby to duży ból głowy, który moim zdaniem nie jest wart zwrotu. Może mógłbyś trochę poprawić strategię interfejsu użytkownika i zamiast pokolorować pole na czerwono, możesz pokolorować obramowania na czerwono lub umieścić obok niego małą biurokrację (jak taśma „Ładowanie” Gmaila), która znika, gdy pudełko jest w środku skupiać.

Z jQuery to bułka z masłem:

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

Jeśli chcesz być bardziej selektywny, dodaj nazwę klasy dla selektora.

Moim zdaniem prostszy sposób to:

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

2. Użyj tego kodu:

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

Po zastosowaniu @Benjamina, jego rozwiązania, odkryłem, że naciśnięcie przycisku Wstecz nadal daje mi żółte podświetlenie.

Moim rozwiązaniem, aby w jakiś sposób zapobiec temu żółtemu podświetleniu, jest zastosowanie następującego 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>

Mam nadzieję, że to pomoże każdemu!

To działa. Co najlepsze, możesz użyć wartości rgba (hack wstawiania box-shadow nie działa z rgba). To jest drobna modyfikacja odpowiedzi @ Benjamina. Używam $ (document) .ready () zamiast $ (window) .load (). Wydaje mi się, że działa lepiej - teraz jest znacznie mniej FOUC. Nie wierzę, że istnieją i wady używania $ (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);
        });
    });
};

w dzisiejszych wersjach działa to również, jeśli zostanie umieszczone w jednym z dwóch wejść logowania. Napraw również problem z wersją 40+ i późnym Firefoksem.

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

input:focus { outline:none; }

To zadziałało świetnie, ale najprawdopodobniej utrzyma jednolitość w Twojej witrynie, więc będziesz chciał uwzględnić to również w swoim CSS dla obszarów tekstowych:

textarea:focus { outline:none; }

Dla większości może się to wydawać oczywiste, ale dla początkujących możesz również ustawić kolor jako taki:

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

Jeśli dobrze pamiętam,! Ważna reguła w arkuszu stylów dotycząca koloru tła danych wejściowych zastąpi autouzupełnianie paska narzędzi Google - prawdopodobnie to samo dotyczy Chrome.