Chciałbym również sprawdzić, czy jest na to odpowiedź.
Kyle
12
W przypadku stylizacji ten kolor może poważnie z elementami projektu, takimi jak obrysowanie znaczników wejściowych również w Chrome, bardziej chciałbym zmienić kolor niż go wyłączyć.
Aby wyłączyć autouzupełnianie, możesz dodać autocomplete = "off" do swojego elementu wejściowego, np. <Input type = "text" id = "input" autocomplete = "off">
joe_young
1
Tylko dodatkowe informacje: ugryzło mnie to, gdy mam pole hasła. Moje pola zostały automatycznie podświetlone (żółte) i wypełnione dziwną wartością. Znalazłem rozwiązanie tutaj: zigpress.com/2014/11/22/stop-chrome-messing-forms ... Rozwiązanie znajduje się w sekcji zatytułowanej „Wyłącz autouzupełnianie Google Chrome” ... dodaj ukryte pola.
Cokorda Raka
Odpowiedzi:
282
Zmień „biały” na dowolny kolor.
input:-webkit-autofill {-webkit-box-shadow:0001000px white inset !important;}
świetny pomysł. Trzymałbym 50 lub 100, ilekroć jest to wystarczające (pola wejściowe zwykłego rozmiaru), aby uniknąć potencjalnego spadku wydajności na słabszych urządzeniach. (I nie ma potrzeby px po 0)
Frank Nocke
4
Uwielbiam ten hack! Świetne myślenie ... Każdy usuwa autouzupełnianie. Chciałem utrzymać autouzupełnianie po prostu przejechać brzydką żółtą.
Travis,
1
Nie działa, jeśli za polem wejściowym znajdują się obrazy tła, wystarczy wypełnić cały obszar białym kolorem. Próbowałem wszystkich rozwiązań na tej stronie, w tym opartych na jquery, i one nie działały dla mnie, w końcu musiałem dodać autocomplete = "off" do pola.
Myke Black
19
Aby również stylizować kolor tekstu -webkit-text-fill-color- patrz to pytanie
Erwin Wessels
2
jest błąd, może nie zmieniono składni, ale to działa teraz:box-shadow: inset 0 0 0 1000px white !important;
Muhammad Umer
49
Jeśli chcecie przezroczystych pól wejściowych, możecie użyć przejścia i opóźnienia przejścia.
Najlepsze rozwiązanie dla mnie, ponieważ wartości kolorów RGBA nie działały -webkit-box-shadow. Eliminuje również potrzebę podawania wartości kolorów dla tej deklaracji: nadal będą obowiązywać wartości domyślne.
Sébastien
jeszcze lepiej jest użyć opóźnienia przejścia zamiast czasu jego trwania, aby w ogóle nie mieszać kolorów
antoine129
dobrze, ale z jakiegoś powodu musiałem przenieść tę regułę na końcu pliku, inaczej nie zadziałało
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);});});}
To zadziałało, podczas gdy pierwsza odpowiedź nie. Myślę jednak, że nie będę próbował zmieniać zachowania od a). to jest javascript, więc między sekundą działa a nie działa (dopóki js się nie załaduje) ib). może pomylić użytkownika chrome, który jest przyzwyczajony do domyślnego zachowania.
TK123
3
Mój chrom ponownie stosuje żółty do nowego wejścia :(
Dustin Silk
Proszę nie. To nie będzie działać z żadnym frameworkiem JS, tylko dla stron statycznych.
Achmedzianov Danilian
26
W przeglądarce Firefox można wyłączyć wszystkie autouzupełnianie w formularzu za pomocą atrybutu autocomplete = "off / on". Podobnie poszczególne elementy autouzupełniania można ustawić przy użyciu tego samego atrybutu.
Toczenie autocomplete="off"nie jest obecnie dostępne.
João
4
Niestety to rozwiązanie nie działa już w Chrome.
henrywright
1
Jest to wysoce niezalecane, ponieważ tak naprawdę nie rozwiązujesz tutaj rzeczywistego problemu. zamiast tego tworzysz nowy, denerwując użytkowników, ponieważ muszą oni ręcznie wpisać swoje (prawdopodobnie) dane do logowania (jeśli nawet pamiętają, czym byli)
xorinzor
25
Jeśli chcesz zachować autouzupełnianie, a także wszelkie dane, dołączone moduły obsługi i funkcje dołączone do elementów wejściowych, wypróbuj ten skrypt:
Odpytuje, dopóki nie znajdzie żadnych elementów autouzupełniania, klonuje je, w tym dane i zdarzenia, a następnie wstawia je do DOM w tej samej lokalizacji i usuwa oryginał. Zatrzymuje sondowanie, gdy znajdzie klon do sklonowania, ponieważ autouzupełnianie czasami zajmuje sekundę po załadowaniu strony. Jest to odmiana poprzedniej próbki kodu, ale jest bardziej niezawodna i zachowuje jak największą funkcjonalność.
(Potwierdzono działanie w Chrome, Firefox i IE 8.)
To było jedyne rozwiązanie, które działało, BEZ wyłączenia autouzupełniania.
Xeroxoid
może ustawienie interwałów nie jest konieczne, ponieważ automatyczne wypełnianie chrome na window.load?
Timo Huovinen,
2
Działa bez usuwania automatycznego uzupełniania, znacznie lepszego rozwiązania niż te z milionami głosów.
Ally
Inne rozwiązania nie działały dla mnie, nawet najbardziej uprzywilejowane, ale to zadziałało. Problem, który jest przeciwieństwem tego, co powiedział @Timo powyżej, polega na tym, że Chrome nie wypełnia się automatycznie w oknie window.load. Mimo że zadziałało, jednym z problemów jest to, że jeśli nie ma elementów -webkit-autouzupełniania, pętla działa ciągle. Nie potrzebujesz nawet przerwy, aby to zadziałało. Po prostu ustaw limit czasu z opóźnieniem 50 milisekund, a wszystko będzie dobrze.
Gavin
16
Poniższy CSS usuwa żółty kolor tła i zastępuje go wybranym kolorem tła. Nie wyłącza automatycznego wypełniania i nie wymaga hacków jQuery ani Javascript.
input:-webkit-autofill {-webkit-box-shadow:00050px white inset;/* Change the color to your own background color */-webkit-text-fill-color:#333;}
input:-webkit-autofill:focus {-webkit-box-shadow:/*your box-shadow*/,00050px white inset;-webkit-text-fill-color:#333;}
Nie używaj tego skryptu. Jeśli nie ma elementów automatycznie wypełnianych, pętla będzie działała w sposób ciągły co 20 milisekund. Interwał nie jest potrzebny. Ustaw limit czasu po Window.load na około 50 milisekund, a to będzie dużo czasu na usunięcie stylizacji.
Gavin
2
To rozwiązuje problem zarówno w Safari, jak i Chrome
input:-webkit-autofill {-webkit-box-shadow:000px1000px white inset !important;}
input:focus:-webkit-autofill {-webkit-box-shadow:000px1000px white inset !important;}/* You can use color:#color to change the color */
W swoim tagu po prostu wstaw ten mały wiersz kodu.
autocomplete="off"
Nie należy jednak umieszczać tego w polu nazwa użytkownika / adres e-mail / nazwa użytkownika, ponieważ jeśli nadal chcesz korzystać z autouzupełniania, spowoduje to wyłączenie tego pola. Ale znalazłem sposób na obejście tego, po prostu umieść kod w tagu wejściowym hasła, ponieważ i tak nigdy nie uzupełniasz automatycznie. Ta poprawka powinna usunąć siłę koloru, zdolność autouzupełniania matinain w polu adresu e-mail / nazwy użytkownika i pozwala uniknąć niepotrzebnych włamań, takich jak Jquery lub javascript.
Wyłącza automatyczne uzupełnianie i automatyczne wypełnianie (więc żółte tło znikają), czeka 100 milisekund, a następnie przywraca funkcję automatycznego uzupełniania bez automatycznego wypełniania.
Jeśli masz dane wejściowe wymagające automatycznego wypełnienia, podaj im auto-complete-onklasę css.
Żadne z rozwiązań nie działało dla mnie, nazwa użytkownika i hasło nadal były zapełniane i otrzymywały żółte tło.
Zadałem więc sobie pytanie: „W jaki sposób Chrome określa, co należy automatycznie wypełnić na danej stronie?”
„Czy szuka identyfikatorów wejściowych, nazw wejściowych? Identyfikatorów formularzy? Działanie formularza?”
Dzięki moim eksperymentom z nazwą użytkownika i hasłem znalazłem tylko dwa sposoby, które spowodowałyby, że Chrome nie był w stanie znaleźć pól, które powinny zostać automatycznie wypełnione:
1) Umieść hasło przed tekstem. 2) Nadaj im to samo imię i nazwisko ... lub bez imienia i nazwiska.
Po załadowaniu strony za pomocą javascript możesz zmienić kolejność danych wejściowych na stronie lub dynamicznie nadać im nazwę i identyfikator ...
Chrome nie wie, co go trafiło ... autouzupełnianie pozostaje wyłączone.
Nie działa w Chrome. Gdy tylko pole zmieni się na typ = hasło, Chrome je wypełnia
mowgli,
0
Aktualizacja rozwiązania Arjans. Próbując zmienić wartości, nie pozwoliłoby ci to. To działa dobrze dla mnie. Gdy skupisz się na wejściu, zmieni kolor na żółty. jest wystarczająco blisko.
Odpowiedź na Namrouti jest poprawna. Ale tło jest nadal żółte po wybraniu wejścia . Dodanie !importantnapraw problem. Jeśli chcesz również textareai selectprzy takim samym zachowaniu, po prostu dodajtextarea:-webkit-autofill, select:-webkit-autofill
Odpowiedzi:
Zmień „biały” na dowolny kolor.
źródło
-webkit-text-fill-color
- patrz to pytaniebox-shadow: inset 0 0 0 1000px white !important;
Jeśli chcecie przezroczystych pól wejściowych, możecie użyć przejścia i opóźnienia przejścia.
źródło
-webkit-box-shadow
. Eliminuje również potrzebę podawania wartości kolorów dla tej deklaracji: nadal będą obowiązywać wartości domyślne.Rozwiązanie tutaj :
źródło
W przeglądarce Firefox można wyłączyć wszystkie autouzupełnianie w formularzu za pomocą atrybutu autocomplete = "off / on". Podobnie poszczególne elementy autouzupełniania można ustawić przy użyciu tego samego atrybutu.
Możesz to przetestować w Chrome, tak jak powinno działać.
źródło
autocomplete="off"
nie jest obecnie dostępne.Jeśli chcesz zachować autouzupełnianie, a także wszelkie dane, dołączone moduły obsługi i funkcje dołączone do elementów wejściowych, wypróbuj ten skrypt:
Odpytuje, dopóki nie znajdzie żadnych elementów autouzupełniania, klonuje je, w tym dane i zdarzenia, a następnie wstawia je do DOM w tej samej lokalizacji i usuwa oryginał. Zatrzymuje sondowanie, gdy znajdzie klon do sklonowania, ponieważ autouzupełnianie czasami zajmuje sekundę po załadowaniu strony. Jest to odmiana poprzedniej próbki kodu, ale jest bardziej niezawodna i zachowuje jak największą funkcjonalność.
(Potwierdzono działanie w Chrome, Firefox i IE 8.)
źródło
Poniższy CSS usuwa żółty kolor tła i zastępuje go wybranym kolorem tła. Nie wyłącza automatycznego wypełniania i nie wymaga hacków jQuery ani Javascript.
Rozwiązanie skopiowane z: Zastąp wypełnianie formularzy przeglądarki i podświetlanie danych wejściowych za pomocą HTML / CSS
źródło
Pracowałem dla mnie, wymagana była tylko zmiana css.
możesz wstawić dowolny kolor zamiast #ffffff .
źródło
Trochę zuchwały, ale działa idealnie dla mnie
źródło
Kombinacja odpowiedzi zadziałała dla mnie
źródło
Oto wersja Jasona autorstwa MooTools. Naprawia to również w Safari.
źródło
To rozwiązuje problem zarówno w Safari, jak i Chrome
źródło
Pomogło mi to, tylko wersja CSS.
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
gdzie biel może mieć dowolny kolor.
źródło
Używam tego,
źródło
W swoim tagu po prostu wstaw ten mały wiersz kodu.
Nie należy jednak umieszczać tego w polu nazwa użytkownika / adres e-mail / nazwa użytkownika, ponieważ jeśli nadal chcesz korzystać z autouzupełniania, spowoduje to wyłączenie tego pola. Ale znalazłem sposób na obejście tego, po prostu umieść kod w tagu wejściowym hasła, ponieważ i tak nigdy nie uzupełniasz automatycznie. Ta poprawka powinna usunąć siłę koloru, zdolność autouzupełniania matinain w polu adresu e-mail / nazwy użytkownika i pozwala uniknąć niepotrzebnych włamań, takich jak Jquery lub javascript.
źródło
Jeśli chcesz się go całkowicie pozbyć, dostosowałem kod w poprzednich odpowiedziach, aby działał również na aktywowaniu, aktywowaniu i skupieniu:
źródło
!important
jest konieczne, ale dzięki, pomogło mi to bardzo.Oto rozwiązanie Mootools działające tak samo jak Alessandro - zastępuje każde zmienione wejście nowym.
źródło
Co z tym rozwiązaniem:
Wyłącza automatyczne uzupełnianie i automatyczne wypełnianie (więc żółte tło znikają), czeka 100 milisekund, a następnie przywraca funkcję automatycznego uzupełniania bez automatycznego wypełniania.
Jeśli masz dane wejściowe wymagające automatycznego wypełnienia, podaj im
auto-complete-on
klasę css.źródło
Żadne z rozwiązań nie działało dla mnie, nazwa użytkownika i hasło nadal były zapełniane i otrzymywały żółte tło.
Zadałem więc sobie pytanie: „W jaki sposób Chrome określa, co należy automatycznie wypełnić na danej stronie?”
„Czy szuka identyfikatorów wejściowych, nazw wejściowych? Identyfikatorów formularzy? Działanie formularza?”
Dzięki moim eksperymentom z nazwą użytkownika i hasłem znalazłem tylko dwa sposoby, które spowodowałyby, że Chrome nie był w stanie znaleźć pól, które powinny zostać automatycznie wypełnione:
1) Umieść hasło przed tekstem. 2) Nadaj im to samo imię i nazwisko ... lub bez imienia i nazwiska.
Po załadowaniu strony za pomocą javascript możesz zmienić kolejność danych wejściowych na stronie lub dynamicznie nadać im nazwę i identyfikator ...
Chrome nie wie, co go trafiło ... autouzupełnianie pozostaje wyłączone.
Szalony hack, wiem. Ale to działa dla mnie.
Chrome 34.0.1847.116, OSX 10.7.5
źródło
Jedyny sposób, który działa dla mnie to: (wymagane jQuery)
źródło
Rozwiązałem ten problem z polem hasła, które mi się podoba:
Ustaw typ wprowadzania na tekst zamiast hasła
Usuń wartość wejściową tekstu za pomocą jQuery
Konwertuj typ danych wejściowych na hasło za pomocą jQuery
źródło
Aktualizacja rozwiązania Arjans. Próbując zmienić wartości, nie pozwoliłoby ci to. To działa dobrze dla mnie. Gdy skupisz się na wejściu, zmieni kolor na żółty. jest wystarczająco blisko.
źródło
Wypróbuj ten kod:
źródło
Odpowiedź na Namrouti jest poprawna. Ale tło jest nadal żółte po wybraniu wejścia . Dodanie
!important
napraw problem. Jeśli chcesz równieżtextarea
iselect
przy takim samym zachowaniu, po prostu dodajtextarea:-webkit-autofill, select:-webkit-autofill
Tylko dane wejściowe
wprowadź, wybierz, pole tekstowe
źródło
Dodawanie
autocomplete="off"
nie spowoduje cięcia.Zmień atrybut typu danych wejściowych na
type="search"
.Google nie stosuje automatycznego wypełniania do danych wejściowych z rodzajem wyszukiwania.
Mam nadzieję, że to pozwoli Ci zaoszczędzić trochę czasu.
źródło
Jeśli chcesz uniknąć żółtego migotania do momentu nałożenia css, uderz w takiego złego chłopca:
źródło
Ostateczne rozwiązanie:
źródło
Podobne pytanie: Link
źródło
Właśnie znalazłem się z tym samym pytaniem. To działa dla mnie:
źródło