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

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?

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.

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

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;
}

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;
}

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.

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;
}  

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;
    }

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;
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

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

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;
}

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.

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;
}

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;
}

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);
    });
});}

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.

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

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;
    }
}

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);
            }
        }
    }
}

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');
    });
}

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);           
});

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.

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

input:-internal-autofill-selected {
    background-color: transparent;
}

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;
}

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
}

Ż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

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

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;
}

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;
}

To działało dla mnie:

padding: 5px;
background-clip: content-box;