Czy usuwasz kolor tła wejściowego dla autouzupełniania w Chrome?

650

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?

DisgruntledGoat
źródło
2
Tutaj masz szersze informacje: stackoverflow.com/questions/2338102/…
dasm
Zobacz moją odpowiedź na podobny post: stackoverflow.com/a/13691346/336235
Ernests Karlsons

Odpowiedzi:

1168

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 transparenttu nie zadziała.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Dodatkowo możesz użyć tego do zmiany koloru tekstu:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

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.

Fareed Alnamrouti
źródło
1
W Chrome teraz arkusz stylów klienta użytkownika pokazuje :-internal-autofill-previewedi :-internal-autofill-selectedpseudoklasy zamiast -webkit-autofill... Tajemniczo jednak -webkit-autofillnadal działa. Ja osobiście nie potrzebowałem !important.
Andy,
Nie potrzebowałem hover / focus / active pseudo selektorów
antoine129
317

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.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Przykład Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Steve
źródło
Działa jak urok.
Lalnuntluanga Chhakchhuak
1
To zdecydowanie działa! (Chrome 79)
Lashae,
3
Uważam, że jest to lepsze niż zaakceptowana odpowiedź ... metoda box-shadow jest sprytna i działa, ale gdy użytkownik wybiera wartość do automatycznego wypełnienia, domyślny kolor na krótko miga w polu wprowadzania, co może być kłopotliwe jeśli twoje dane wejściowe mają ciemne tło. To rozwiązanie nie ma takich problemów. Twoje zdrowie!
skwidbreth
Doskonały! Działał jeszcze lepiej niż się spodziewałem!
sdlins
2
Działa to w przypadku Vuetify 2, zwłaszcza jeśli ustawiszcolor: inherit
Marc
275

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

-webkit-box-shadow: 0 0 0px 1000px white inset;

Próbowałem więc kilku innych rzeczy i wpadłem na to:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
Nathan White
źródło
7
Niesamowite, potrzebuję też przezroczystego tła. PS: nie zapomnij -webkit-text-fill-color: yellow !important;o kolorze tekstu.
gfpacheco
Będzie to nadal wyświetlało tło autouzupełniania, gdy dane wejściowe zostały ukryte / pokazane za pomocą display. Fiddle - Sprawdź to
Martin
27
Zamiast ustawiać transition-durationabsurdalnie wysoko, lepiej ustawić transition-delayzamiast tego. W ten sposób jeszcze bardziej zmniejszasz możliwość jakichkolwiek zmian kolorów.
Kudłaty
transitionHack 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ć.
guari
1
Świetne rozwiązanie .... ale dlaczego to działa? A dlaczego ustawienie background-colornie działa? Chrome musi to naprawić !!
TetraDev
60

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.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}
Gísli Freyr Svavarsson
źródło
6
Ustawiłem obraz jako tło pola wejściowego, to rozwiązanie usuwa żółty odcień, ale obraz tła jest nadal ukryty
Matteo Tassinari
Najlepsze jak dotąd rozwiązanie, działa świetnie z istniejącym box-shadowdo sprawdzania poprawności
Yoann
chrom powiedział, że "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;
naanace
1
pracował, ale bez podwójnego cytatu dla mnie;)
Jon
@ Yoann, jak dokładnie działało w przypadku istniejącej box-shadowweryfikacji? 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.
Paul Razvan Berg,
50

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:

<form autocomplete="off">
...
</form

Możesz też zmienić kolor autouzupełniania, wykonując:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

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.

Mohamed Mansour
źródło
22
dzięki, ale ta reguła CSS webkita nie działa. Arkusz stylów klienta użytkownika zawsze zastępuje kolor tła, nawet jeśli (a) jest ustawiony na !importanti (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ć.
DisgruntledGoat
1
Niektóre osoby mają ten sam problem, czy sprawdziłeś wpis błędu? code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour
6
Chrome blokuje wszelkie próby CSS zastąpienia tego żółtego koloru. Ustawienie autocomplete="off"z pewnością spowoduje problemy z dostępnością. Dlaczego i tak ta odpowiedź jest oznaczona jako poprawna?
João
2
To dobre rozwiązanie, ale jeśli używasz React, będzie narzekać, że autouzupełnianie jest nieznaną właściwością DOM. Dlatego tak naprawdę jest to autoComplete (uwaga na camelcased).
Tim Scollick,
2
Wyłączenie autouzupełniania to hack, a nie rozwiązanie
Paullo
30

Możliwym obejściem w tej chwili jest ustawienie „silnego” cienia wewnętrznego:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px 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*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}  
Tamás Pap
źródło
2
Jest to rozwiązanie, które faktycznie działa, nie chcemy pomijać żółtego tła tylko kilka razy, ponieważ wynikiem tego będzie zaakceptowana odpowiedź.
davidkonrad
22

wypróbuj to, aby ukryć styl autouzupełniania

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }
Francisco Costa
źródło
ciekawe, kolor tła nie ma wpływu. -Webkit-box-shadow to sprytny bit, który zastępuje żółte tło w Chrome
Geuis
19

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
Jack Russell
źródło
Ustawiłem obraz jako tło pola wejściowego, to rozwiązanie usuwa żółty odcień, ale obraz tła jest nadal ukryty
Matteo Tassinari
To jedyny, który działa dla mnie w Chrome 83. Najczęściej wybierany był do Chrome 82.
sdlins
19

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
Patrick Fisher
źródło
1
To faktycznie działało dla mnie, ponieważ zaakceptowana odpowiedź miga bladożółtym.
CleoR
najlepsze rozwiązanie
imho
15

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.

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

spowoduje to całkowite usunięcie koloru żółtego z pól wprowadzania

don
źródło
11

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.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}
StefansArya
źródło
10

W dodatku:

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

Możesz także dodać

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

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.

Linghua Jin
źródło
10

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.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
Alex
źródło
Od teraz w najnowszym Chrome 50.xx IT działa idealnie dobrze. Wielkie dzięki!
vivekkupadhyay
2
Zamiast ustawiać transition-durationabsurdalnie wysoko, lepiej ustawić transition-delayzamiast tego. W ten sposób jeszcze bardziej zmniejszasz możliwość jakichkolwiek zmian kolorów.
Kudłaty
@ Shaggy dzięki, właśnie zmieniłem opóźnienie. Dużo ładniejszy.
Alex
9

Spróbuj tego: Tak samo jak powyżej @ Nathan-white z drobnymi poprawkami.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}
Surender Lohia
źródło
To najlepsza odpowiedź po wypróbowaniu wszystkich odpowiedzi.
gfcodix
8

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/

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
To wydaje się być najlepszym rozwiązaniem, chociaż blokuje kontrolę poczty Kicksenda . Wszelkie pomysły, jak to obejść?
João
To nie jest dobre rozwiązanie, ponieważ automatycznie uzupełnia hasło Google Chrome przestaje działać. Oznacza to, że początkowo wpisujesz nazwę, a Google Chrome automatycznie wypełnia hasło. Jednak po wykonaniu powyższego skryptu javascript nazwa zostanie usunięta i ustawiona ponownie, a hasło automatycznie wypełnione zostanie utracone
vanval
6

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

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

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.

Daniel Fairweather
źródło
cóż, to działało w większości .. niestety usuwa moje hasło. Próbuje go najpierw zapisać hasło i zresetować po pętli for, ale wydaje się, że Chrome ma z tym pewne problemy. mmmm
Dustin Silk
6

Mam czyste rozwiązanie CSS, które korzysta z filtrów CSS.

filter: grayscale(100%) brightness(110%);

Filtr w skali szarości zastępuje żółty kolor szary, a następnie jasność usuwa kolor szary.

ZOBACZ CODEPEN

2ne
źródło
To mi nie działa?
Ikechukwu Eze
5

Będzie to działać w przypadku wprowadzania, obszaru tekstowego i wyboru w stanach normalnym, najechaniu kursorem, fokusu i aktywnym.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

Oto wersja powyższego rozwiązania SCSS dla tych, którzy pracują z SASS / SCSS.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}
Waqas Anwar
źródło
Niezły, a dzięki za kod SASS!
Bernoulli IT,
4

Dla tych, którzy używają kompasu:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}
jedmao
źródło
3

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:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}
ed1nh0
źródło
3

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.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});
Nicolas Arias
źródło
3

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

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

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.

Jurion
źródło
3

i to zadziałało dla mnie (przetestowano Chrome 76)

input:-internal-autofill-selected {
    background-color: transparent;
}
guido _nhcol.com.br_
źródło
3

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.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}
SUHAIL KC
źródło
To nie działa (już) i zostało skopiowane z CSS Tricks BTW
Bernoulli IT
1
To zadziałało dla mnie.
AzizStark
2

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:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}
i ja
źródło
2

Ż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

ja
źródło
2

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:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

Zasadniczo usuwa znacznik podczas zapisywania wartości i odtwarza ją, a następnie przywraca wartość.

Florian B.
źródło
Rozwiązanie autorstwa namrouti działa dobrze dla mnie w Chrome 51.0.2704.106 / OSX 10.11.5.
oens
2

używam tego. Pracuj dla mnie. usuń żółte tło pola.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}
Ali Bagheri
źródło
1

Jak wspomniano wcześniej, wstawka -webkit-box-shadow dla mnie działa najlepiej.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

Również fragment kodu, aby zmienić kolor tekstu:

input:-webkit-autofill:first-line {
     color: #797979;
}
Giedrius Vičkus
źródło
1

To działało dla mnie:

padding: 5px;
background-clip: content-box;
arczi
źródło