Usuwanie koloru tła wejściowego dla autouzupełniania Chrome?

Mam lepsze rozwiązanie.

Ustawienie tła na inny kolor jak poniżej nie rozwiązało problemu dla mnie, ponieważ potrzebowałem przezroczystego pola wejściowego

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

Więc próbowałem 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;
}

Poprzednie rozwiązania dodawania cienia pudełkowego działają dobrze dla osób, które potrzebują jednolitego kolorowego tła. Inne rozwiązanie dodawania przejścia działa, ale konieczność ustawienia czasu trwania / opóźnienia będzie oznaczać, że w pewnym momencie może się pojawić ponownie.

Moim rozwiązaniem jest użycie klatek kluczowych, w ten sposób zawsze będą wyświetlane wybrane przez Ciebie kolory.

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

To jest moje rozwiązanie, użyłem przejścia i opóźnienia przejścia, więc 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;
}

To zostało tak zaprojektowane, ponieważ to zachowanie kolorowania zostało z WebKit. Pozwala to użytkownikowi zrozumieć dane zostały wstępnie wypełnione. Bug 1334

Można wyłączyć autouzupełnianie wykonując (lub na specjalnej kontroli formularza:

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

Lub możesz zmienić kolor autouzupełniania wykonując:

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

Uwaga, wykryto błąd, aby to znowu zadziałało: http://code.google.com/p/chromium/issues/detail?id=46543

This is A WebKit zachowanie.

Możliwe obejście tej chwili polega na ustawieniu "silnego" cienia wewnątrz:

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

Try this for Hide autouzupełnianie style

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 zadziałały, ale miały swoje wady. Poniższy kod jest połączeniem dwóch powyższych odpowiedzi, które działają bezbłędnie bez mrugania.

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 przeszukiwania wydaje się, że google nadal nadpisuje żółty kolor jakoś, ale ja za poprawkę dla niego. Zgadza się. będzie działać również dla hover, focus itp. wszystko, co musisz zrobić, to dodać !ważne dla niego.

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

To całkowicie usunie żółty z pól wejściowych

Jeśli chcesz zachować funkcję autouzupełniania w Nienaruszonym Stanie, możesz użyć trochę jQuery, aby usunąć stylizację Chrome. 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);
    });
});}

Oprócz tego:

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

Możesz też dodać

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

Inne mądre, po kliknięciu na wejście, żółty kolor powróci. W przypadku Fokusa, jeśli używasz bootstrap, druga część dotyczy obramowania podświetlającego 0 0 8px rgba(82, 168, 236, 0.6);

Tak, że będzie wyglądał jak każde wejście bootstrap.

Miałem problem, w którym nie mogłem użyć box-shadow, ponieważ potrzebowałem przezroczystego pola wprowadzania. 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;
}

Opracowałem inne rozwiązanie przy użyciu JavaScript bez JQuery. Jeśli uznasz to za przydatne lub zdecydujesz się ponownie opublikować moje rozwiązanie, proszę tylko o podanie mojego nazwiska. Smacznego. - 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 tym, że Google Chrome usuwa styl Webkit zaraz po wprowadzeniu dodatkowego tekstu. Po prostu zmiana wartości pola wejściowego nie wystarczy, Chrome chce zdarzenia. Skupiając się na każdym polu wejściowym (tekst, hasło), możemy wysłać Zdarzenie klawiatury (literę 'a'), a następnie ustaw wartość tekstu na poprzedni stan (automatycznie wypełniony tekst). Pamiętaj, że ten kod będzie działał w każdej przeglądarce i sprawdzi każde pole wejściowe na stronie, dostosuje je do Twoich potrzeb.

Spróbuj tego: Tak samo jak @ Nathan-white odpowiedź powyżej 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;
}

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

Dodanie godzinnego opóźnienia wstrzyma wszelkie zmiany css w elemencie wejściowym.
Jest to lepsze niż dodawanie animacji przejścia lub wewnętrznego cienia.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

Mam rozwiązanie, jeśli chcesz zapobiec autouzupełnianie z google chrome, ale jego trochę "Maczeta", po prostu usuń klasę, że Google chrome dodaje do tych pól wejściowych i ustawić wartość NA"", jeśli nie trzeba pokazać przechowywać 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 Daniel Fairweather (Usuwanie koloru tła wejściowego dla Chrome autocomplete?) (chciałbym upvote jego rozwiązanie, ale nadal trzeba 15 rep) działa naprawdę dobrze. Istnieje naprawdę ogromna różnica w przypadku większości upvoted rozwiązanie : można zachować obrazy tła ! Ale mała modyfikacja (tylko Chrome check)

I pamiętaj, że działa tylko na polach widocznych !

Więc ty, jeśli używasz $.show() dla Twojej formy, musisz uruchomić ten kod po zdarzeniu show ()

Moje pełne rozwiązanie (mam przyciski pokaż/ukryj dla 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, żeby to był komentarz.

Jeśli chcesz, mogę umieścić link do strony, na której go używałem.

Będzie to działać dla input, textarea i select w stanie normal, hover, focus I active.

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 SCSS powyższego rozwiązania 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;
    }
}

Dzięki Benjamin!

Rozwiązanie Mootools jest trochę bardziej skomplikowane, ponieważ nie mogę uzyskać pól za pomocą $('input:-webkit-autofill'), więc to, czego użyłem, jest następujące:

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
}

Poddaję się!

Ponieważ nie ma możliwości zmiany koloru wejścia za pomocą autouzupełniania, wyłączam je wszystkie za pomocą jQuery dla przeglądarek webkit. Tak:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Żadne z rozwiązań nie działało dla mnie, Cień wstawki nie będzie działał dla mnie, ponieważ wejścia mają półprzezroczyste tło nakładane na tło strony.

Więc zadałem sobie pytanie: "jak Chrome określa, co powinno być automatycznie wypełniane na danej stronie?"

" czy szuka identyfikatorów wejściowych, nazw wejściowych? Formularze? Formować?"

Dzięki moim eksperymentom z wprowadzaniem nazwy użytkownika i hasła były tylko dwa sposoby, które mogły spowodować, że Chrome nie będzie mógł znajdź pola, które powinny być automatycznie wypełniane:

1) Umieść hasło przed tekstem. 2) podaj im to samo imię i nazwisko oraz identyfikator ... albo brak nazwiska i dowodu.

Po załadowaniu strony, za pomocą javascript można albo dynamicznie zmieniać kolejność wejść na stronie, albo dynamicznie nadawać im ich nazwę i id ...

A Chrome nie wie co w niego uderzyło ... autouzupełnianie jest zepsute!

Szalony hack, wiem. Ale to działa na mnie.

Chrome 34.0.1847.116, OSX 10.7.5

Niestety żadne z powyższych rozwiązań nie zadział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 go, a następnie odkłada z powrotem wartość.

Mam czyste rozwiązanie CSS, które wykorzystuje filtry CSS.

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

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

ZOBACZ CODEPEN

Jak wspomniano wcześniej, inset-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ż urywek kodu, aby zmienić kolor tekstu:

input:-webkit-autofill:first-line {
     color: #797979;
}

Ten facet ma świetne rozwiązanie używając JS i działa idealnie.

Jest to kompleksowe rozwiązanie tego zadania.

(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)

*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

Proste, wystarczy dodać,

    autocomplete="new-password"

Do pola Hasło.

Google Chrome user agent uniemożliwia deweloperom CSS, więc do zmiany autofill UI musi używać innej właściwości, takiej jak Ta:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}