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

151

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

Dave Rutledge
źródło
1
to nie tylko problem w Chrome. Pasek narzędzi Google Toolbar dla innych przeglądarek robi to samo „żółknięcie” pól wejściowych.
Carlton Jenke,
2
Udzieliłem Ci odpowiedzi, która działa poniżej.
John Leidegren
8
Nie rozumiem, dlaczego wszyscy mówią o konspekcie: żaden, pytanie dotyczy żółtego tła, a NIE konturu. A atrybut autouzupełniania ustawiony na wyłączony NIE rozwiąże problemu, ponieważ Davebug powiedział, że chce, aby autouzupełnianie działało, ale nie żółte tło.

Odpowiedzi:

74

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" ...>
Ben Hoffstein
źródło
„Zamierzam sprawdzić możliwość wyłączenia atrybutu autouzupełniania, jeśli / kiedy zostanie wyzwolony błąd, ale programowe wyłączenie autouzupełniania dla pojedynczych danych wejściowych na stronie wymaga skomplikowanego kodowania”.
Dave Rutledge,
Heh ... tak, dziękuję, chociaż przypuszczam, że nadal muszę sprawdzić w Chrome, prawda?
Dave Rutledge,
2
dla osób korzystających z szyn prosta forma<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
carbonr
przepraszam, że to mi nie pomogło
M.Islam
136

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; }
John Leidegren
źródło
9
Tło? Nie wiedziałem, że Chrome dodał również kolor tła? Jeśli tak, można to naprawić za pomocą czegoś takiego:focus { background-color: #fff; }
John Leidegren
Zabicie konturu za pomocą CSS może zapobiec żółknięciu, ale nie zapobiegnie faktycznemu autouzupełnianiu. Jeśli chcesz to zrobić, ważne jest, aby użyć atrybutu autouzupełniania, niestandardowego lub nie.
Tom Boutell,
2
@pestaa poprawnie, to nie jest właściwa odpowiedź, ale z pewnością rozwiązuje podobny problem
David Lawson,
Uważaj, gdy masz do czynienia z tabletami i innymi rzeczami, domyślna przeglądarka Androida jest trochę trudna w użyciu bez konspektu. Wystarczająco łatwe do zastosowania w przeglądarkach innych niż mobilne :)
Tim Post
Mała poprawa: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
Felipe Lima
56

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;
}
JStormThaKid
źródło
to jest świetny hack. Dzięki
Jason
Dodałbym też do tego uwagę: Dinput:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
StephanieQ
cześć @JStormThaKid, użyłem tego ..., ale nie działało przy poprawnych danych wejściowych ... odpowiedz na to ...
mithu
Dziękuję za odpowiedź na pytanie, które faktycznie zadał! Prawie zacząłem tracić nadzieję.
BVernon,
Najlepsza odpowiedź tutaj, nadal chciałem autouzupełniania google, więc dzięki
Spangle
14

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);
    });
});}
Benzoes
źródło
Dzięki za podpowiedź! Jednak po wysłaniu formularza, kliknięciu przycisku Wstecz, powróciło żółte podświetlenie. Rozszerzyłem twój fragment (zobacz moją odpowiedź), aby to objąć.
321X
+1 @Benjamin fajne rozwiązanie, miga trochę na żółto, ale na końcu naprawia;)
itsme
7

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 )

Kita
źródło
2

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

W zasadzie niegroźny
źródło
1

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.

Hohner
źródło
1

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');
    };
Tim
źródło
1

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!

321X
źródło
1

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);
        });
    });
};
Vin
źródło
1

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');" />
hsobhy
źródło
0
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 ; }
NewFangSol
źródło
-1

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.

Quentin
źródło