W formularzu, nad którym pracuję, Chrome automatycznie wypełnia pola adresu e-mail i hasła. To dobrze, jednak Chrome zmienia kolor tła na jasnożółty.
Projekt, nad którym pracuję, wykorzystuje jasny tekst na ciemnym tle, więc to naprawdę popsuwa wygląd formy - mam surowe żółte pola i prawie niewidoczny biały tekst. Po ustawieniu ostrości pola wracają do normy.
Czy można zatrzymać Chrome zmieniającą kolor tych pól?
autocomplete
input
google-chrome
DisgruntledGoat
źródło
źródło
Odpowiedzi:
Działa to dobrze. Możesz zmieniać style pól wprowadzania oraz style tekstu w polu wprowadzania:
Tutaj można użyć dowolnego koloru np
white
,#DDD
,rgba(102, 163, 177, 0.45)
.Ale
transparent
tu nie zadziała.Dodatkowo możesz użyć tego do zmiany koloru tekstu:
Rada: Nie używaj nadmiernego promienia rozmycia w setkach lub tysiącach. Nie przynosi to żadnych korzyści i może powodować obciążenie procesora słabszymi urządzeniami mobilnymi. (Dotyczy to również faktycznych cieni zewnętrznych). W przypadku zwykłego pola wejściowego o wysokości 20px „promień rozmycia” 30px idealnie go zakrywa.
źródło
:-internal-autofill-previewed
i:-internal-autofill-selected
pseudoklasy zamiast-webkit-autofill
... Tajemniczo jednak-webkit-autofill
nadal działa. Ja osobiście nie potrzebowałem!important
.Poprzednie rozwiązania dodawania cienia pudełkowego sprawdzają się dobrze dla osób, które potrzebują jednolitego koloru tła. Inne rozwiązanie dodania przejścia działa, ale konieczność ustawienia czasu trwania / opóźnienia będzie oznaczać, że w pewnym momencie może się ponownie wyświetlić.
Moim rozwiązaniem jest użycie zamiast tego klatek kluczowych, dzięki czemu zawsze będą wyświetlać wybrane kolory.
Przykład Codepen: https://codepen.io/-Steve-/pen/dwgxPB
źródło
color: inherit
Mam lepsze rozwiązanie.
Ustawienie tła na inny kolor, jak poniżej, nie rozwiązało problemu, ponieważ potrzebowałem przezroczystego pola wejściowego
Próbowałem więc kilku innych rzeczy i wpadłem na to:
źródło
-webkit-text-fill-color: yellow !important;
o kolorze tekstu.display
. Fiddle - Sprawdź totransition-duration
absurdalnie wysoko, lepiej ustawićtransition-delay
zamiast tego. W ten sposób jeszcze bardziej zmniejszasz możliwość jakichkolwiek zmian kolorów.transition
Hack będzie działać tylko wtedy, gdy wejście nie jest automatycznie wypełnione domyślny wpis nagranego przez przeglądarkę, w przeciwnym razie żółte tło wciąż tam być.background-color
nie działa? Chrome musi to naprawić !!To jest moje rozwiązanie, użyłem przejścia i opóźnienia przejścia, dlatego mogę mieć przezroczyste tło na moich polach wejściowych.
źródło
box-shadow
do sprawdzania poprawności"color 9999s ease-out, background-color 9999s ease-out";
nie jest wyrażeniem Valide. Użyłem wtedy kodu-webkit-transition: background-color 9999s ease-out;
i-webkit-text-fill-color: #fff !important;
box-shadow
weryfikacji? W moim przypadku, z powodu tej reguły css, mój niestandardowy cień w czerwonym polu (który wskazuje na błąd wejściowy) zostaje opóźniony, co sprawia, że użytkownik uważa, że najnowsze dane wejściowe są nieprawidłowe, gdy w rzeczywistości są dobre.Zostało to zaprojektowane zgodnie z tym, że to zachowanie koloryzacji pochodzi z WebKit. Pozwala użytkownikowi zrozumieć, że dane zostały wstępnie wypełnione. Bug 1334
Możesz wyłączyć autouzupełnianie, wykonując (lub używając określonej kontroli formularza:
Możesz też zmienić kolor autouzupełniania, wykonując:
Uwaga: śledzony jest błąd, aby to znów działało: http://code.google.com/p/chromium/issues/detail?id=46543
To jest zachowanie WebKit.
źródło
!important
i (b) jest kierowany identyfikatorem w celu uzyskania większej specyficzności. Wygląda na to, że Chrome zawsze go zastąpi. Usunięcie autouzupełniania wydaje się działać, ale tak naprawdę nie chcę tego robić.autocomplete="off"
z pewnością spowoduje problemy z dostępnością. Dlaczego i tak ta odpowiedź jest oznaczona jako poprawna?Możliwym obejściem w tej chwili jest ustawienie „silnego” cienia wewnętrznego:
źródło
wypróbuj to, aby ukryć styl autouzupełniania
źródło
Wszystkie powyższe odpowiedzi działały, ale miały swoje wady. Poniższy kod jest połączeniem dwóch powyższych odpowiedzi, które działają bezbłędnie i nie mrugają.
źródło
SASS
źródło
Po 2 godzinach szukania wydaje się, że Google nadal jakoś przesłania żółty kolor, ale ja go naprawiłem. Zgadza się. będzie działać również w trybie najechania, skupienia itp. wszystko, co musisz zrobić, to dodać! ważne.
spowoduje to całkowite usunięcie koloru żółtego z pól wprowadzania
źródło
Dodanie jednogodzinnego opóźnienia spowoduje wstrzymanie wszelkich zmian css na elemencie wejściowym.
Jest to lepsze niż dodawanie animacji przejścia lub cienia wewnętrznego.
źródło
W dodatku:
Możesz także dodać
W przeciwnym razie po kliknięciu wejścia żółty kolor powróci. W przypadku fokusa, jeśli używasz bootstrap, druga część dotyczy podświetlenia ramki 0 0 8px rgba (82, 168, 236, 0,6);
Tak, że będzie wyglądać jak każde wejście bootstrap.
źródło
Miałem problem polegający na tym, że nie mogłem użyć cienia pola, ponieważ potrzebowałem przezroczystości pola wejściowego. To trochę hack, ale czysty CSS. Ustaw przejście na bardzo długi czas.
źródło
transition-duration
absurdalnie wysoko, lepiej ustawićtransition-delay
zamiast tego. W ten sposób jeszcze bardziej zmniejszasz możliwość jakichkolwiek zmian kolorów.Spróbuj tego: Tak samo jak powyżej @ Nathan-white z drobnymi poprawkami.
źródło
Jeśli chcesz zachować nienaruszoną funkcjonalność autouzupełniania, możesz użyć odrobiny jQuery, aby usunąć styl Chrome. Napisałem krótki post na ten temat tutaj: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
źródło
Opracowałem inne rozwiązanie za pomocą JavaScript bez JQuery. Jeśli uznasz to za przydatne lub zdecydujesz się ponownie opublikować moje rozwiązanie, proszę tylko o podanie mojego nazwiska. Cieszyć się. - Daniel Fairweather
Ten kod opiera się na fakcie, że Google Chrome usuwa styl Webkit, gdy tylko zostanie wprowadzony dodatkowy tekst. Po prostu zmiana wartości pola wejściowego nie wystarczy, Chrome chce zdarzenia. Koncentrując się na każdym polu wejściowym (tekst, hasło), możemy wysłać zdarzenie z klawiatury (litera „a”), a następnie ustawić wartość tekstu na jego poprzedni stan (tekst automatycznie wypełniany). Pamiętaj, że ten kod będzie działał w każdej przeglądarce i sprawdzi każde pole wejściowe na stronie, dostosuj go odpowiednio do twoich potrzeb.
źródło
Mam czyste rozwiązanie CSS, które korzysta z filtrów CSS.
Filtr w skali szarości zastępuje żółty kolor szary, a następnie jasność usuwa kolor szary.
ZOBACZ CODEPEN
źródło
Będzie to działać w przypadku wprowadzania, obszaru tekstowego i wyboru w stanach normalnym, najechaniu kursorem, fokusu i aktywnym.
Oto wersja powyższego rozwiązania SCSS dla tych, którzy pracują z SASS / SCSS.
źródło
Dla tych, którzy używają kompasu:
źródło
Poddaję się!
Ponieważ nie ma możliwości zmiany koloru danych wejściowych za pomocą autouzupełniania, postanowiłem wyłączyć je wszystkie za pomocą jQuery dla przeglądarek webkit. Lubię to:
źródło
Mam rozwiązanie, jeśli chcesz zapobiec autouzupełnianiu z Google Chrome, ale jest to trochę „maczeta”, po prostu usuń klasę, którą Google Chrome dodaje do tych pól wejściowych i ustaw wartość na „”, jeśli nie musisz pokazywać przechowuj dane po załadowaniu.
źródło
Rozwiązanie Daniela Fairweather ( Usuwanie koloru tła wejściowego dla autouzupełniania w Chrome? ) (Chciałbym głosować za jego rozwiązaniem, ale nadal potrzebuję 15 powtórzeń) działa naprawdę dobrze. Jest bardzo duża różnica w przypadku najbardziej uprzywilejowanych rozwiązań: możesz zachować obrazy tła! Ale mała modyfikacja (wystarczy sprawdzić Chrome)
Trzeba pamiętać, że działa TYLKO na widocznych polach !
Jeśli więc używasz $ .show () w formularzu, musisz uruchomić ten kod Po zdarzeniu show ()
Moje pełne rozwiązanie (mam przyciski pokazu / ukrywania formularza logowania):
Jeszcze raz przepraszam, wolałbym, aby to był komentarz.
Jeśli chcesz, mogę umieścić link do strony, na której go użyłem.
źródło
i to zadziałało dla mnie (przetestowano Chrome 76)
źródło
Wypróbowałem prawie wszystkie powyższe rozwiązania. Nic dla mnie nie działa. Wreszcie pracował z tym rozwiązaniem. Mam nadzieję, że ktoś to pomoże.
źródło
Dzięki Benjamin!
Rozwiązanie Mootools jest nieco trudniejsze, ponieważ nie mogę uzyskać pól za pomocą
$('input:-webkit-autofill')
, więc użyłem następującego:źródło
Żadne z rozwiązań nie działało dla mnie, wstawiany cień nie będzie dla mnie działał, ponieważ dane wejściowe mają przezroczyste tło nałożone na tło strony.
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 w ogóle nie używaj imienia i nazwiska.
Po załadowaniu strony za pomocą javascript możesz dynamicznie zmienić kolejność danych wejściowych na stronie lub dynamicznie nadać im nazwę i identyfikator ...
Chrome nie wie, co go trafiło ... autouzupełnianie jest zepsute!
Szalony hack, wiem. Ale to działa dla mnie.
Chrome 34.0.1847.116, OSX 10.7.5
źródło
Niestety, żadne z powyższych rozwiązań nie działało dla mnie w 2016 roku (kilka lat po pytaniu)
Oto agresywne rozwiązanie, którego używam:
Zasadniczo usuwa znacznik podczas zapisywania wartości i odtwarza ją, a następnie przywraca wartość.
źródło
używam tego. Pracuj dla mnie. usuń żółte tło pola.
źródło
Jak wspomniano wcześniej, wstawka -webkit-box-shadow dla mnie działa najlepiej.
Również fragment kodu, aby zmienić kolor tekstu:
źródło
To działało dla mnie:
źródło