Menghapus warna latar belakang input untuk pelengkapan otomatis Chrome?

Pada formulir yang sedang saya kerjakan, Chrome secara otomatis mengisi kolom email dan kata sandi. Ini bagus, namun, Chrome mengubah warna latar belakang menjadi warna kuning pucat.

Desain yang saya kerjakan menggunakan teks terang dengan latar belakang gelap, jadi ini benar-benar mengacaukan tampilan formulir - Saya memiliki kotak kuning dan teks putih yang hampir tidak terlihat. Setelah bidang difokuskan, bidang kembali normal.

Apakah mungkin untuk menghentikan Chrome mengubah warna bidang ini?

Ini berfungsi dengan baik, Anda dapat mengubah gaya kotak input serta gaya teks di dalam kotak input:

Di sini Anda dapat menggunakan warna apapun misalnya white, #DDD, rgba(102, 163, 177, 0.45).

Tetapi transparenttidak akan bekerja di sini.

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

Selain itu, Anda dapat menggunakan ini untuk mengubah warna teks:

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

Saran: Jangan gunakan radius blur yang berlebihan dalam ratusan atau ribuan. Ini tidak memiliki manfaat dan mungkin menempatkan beban prosesor pada perangkat seluler yang lebih lemah. (Juga berlaku untuk bayangan luar aktual). Untuk kotak input normal dengan tinggi 20px, 'radius blur' 30px akan menutupinya dengan sempurna.

Solusi sebelumnya untuk menambahkan bayangan kotak bekerja dengan baik untuk orang-orang yang membutuhkan latar belakang warna solid. Solusi lain untuk menambahkan transisi berfungsi, tetapi harus menetapkan durasi / penundaan akan berarti bahwa pada titik tertentu mungkin akan ditampilkan lagi.

Solusi saya adalah menggunakan keyframe sebagai gantinya, dengan cara itu akan selalu menunjukkan warna yang Anda pilih.

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

Contoh Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Saya punya solusi yang lebih baik.

Mengatur latar belakang ke warna lain seperti di bawah ini tidak menyelesaikan masalah bagi saya karena saya membutuhkan bidang input transparan

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

Jadi saya mencoba beberapa hal lain dan saya datang dengan ini:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

Ini adalah solusi saya, saya menggunakan transisi dan penundaan transisi karena itu saya dapat memiliki latar belakang transparan pada bidang input saya.

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

Ini telah dirancang karena perilaku pewarnaan ini berasal dari WebKit. Hal ini memungkinkan pengguna untuk memahami data yang telah diisi sebelumnya.Bug 1334

Anda bisa mematikan pelengkapan otomatis dengan melakukan (atau pada kontrol formulir khusus:

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

Atau Anda dapat mengubah warna IsiOtomatis dengan melakukan:

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

Catatan, ada bug yang dilacak agar ini berfungsi lagi: http://code.google.com/p/chromium/issues/detail?id=46543

Ini adalah perilaku WebKit.

Solusi yang mungkin saat ini adalah dengan menetapkan bayangan bagian dalam "kuat":

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

coba ini untuk menyembunyikan gaya isi-otomatis

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

Semua jawaban di atas berhasil tetapi memang memiliki kesalahan. Kode di bawah ini adalah gabungan dari dua jawaban di atas yang bekerja dengan sempurna tanpa berkedip.

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

KELANCANGAN

input:-webkit-autofill

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

Setelah 2 jam mencari, tampaknya Google masih menimpa warna kuning, tetapi saya tetap memperbaikinya. Betul. itu akan bekerja untuk melayang, fokus dll juga. yang harus Anda lakukan adalah menambahkan! penting untuk itu.

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

ini akan sepenuhnya menghapus kuning dari bidang input

Menambahkan satu jam penundaan akan menghentikan sementara perubahan css pada elemen input.
Ini lebih baik daripada menambahkan animasi transisi atau bayangan batin.

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

Selain itu:

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

Anda mungkin juga ingin menambahkan

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

Selain itu, ketika Anda mengklik input, warna kuning akan kembali. Untuk fokus, jika Anda menggunakan bootstrap, bagian kedua adalah untuk perbatasan yang menyorot 0 0 8px rgba (82, 168, 236, 0.6);

Sedemikian rupa sehingga hanya akan terlihat seperti input bootstrap.

Saya punya masalah di mana saya tidak bisa menggunakan bayangan kotak karena saya perlu bidang input menjadi transparan. Ini sedikit hack tapi CSS murni. Atur transisi ke jumlah waktu yang sangat lama.

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

Coba ini: Sama seperti @ Nathan-white jawaban di atas dengan tweak kecil.

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

Jika Anda ingin menjaga fungsi autocomplete tetap utuh, Anda dapat menggunakan sedikit jQuery untuk menghapus gaya Chrome. Saya menulis posting pendek tentang hal itu di sini: 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);
    });
});}

Saya telah mengembangkan solusi lain menggunakan JavaScript tanpa JQuery. Jika Anda merasa ini berguna atau memutuskan untuk mengirim kembali solusi saya, saya hanya meminta Anda memasukkan nama saya. Nikmati. - 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();
        }
    }
}

Kode ini didasarkan pada kenyataan bahwa Google Chrome menghapus gaya Webkit segera setelah teks tambahan dimasukkan. Cukup mengubah nilai kolom input tidak cukup, Chrome menginginkan acara. Dengan berfokus pada setiap bidang input (teks, kata sandi), kami dapat mengirim acara keyboard (huruf 'a') dan kemudian mengatur nilai teks ke keadaan sebelumnya (teks yang diisi otomatis). Ingatlah bahwa kode ini akan berjalan di setiap browser dan akan memeriksa setiap bidang input dalam halaman web, sesuaikan sesuai dengan kebutuhan Anda.

Saya memiliki solusi CSS murni yang menggunakan Filter CSS.

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

Filter abu-abu menggantikan warna kuning dengan abu-abu, kemudian kecerahan menghilangkan abu-abu.

MELIHAT CODEPEN

Ini akan berfungsi untuk input, textarea dan pilih dalam keadaan normal, mengarahkan, fokus dan aktif.

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

Berikut adalah versi SCSS dari solusi di atas untuk mereka yang bekerja dengan SASS / SCSS.

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

Bagi mereka yang menggunakan Kompas:

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

Saya menyerah!

Karena tidak ada cara untuk mengubah warna input dengan autocomplete, saya memutuskan untuk menonaktifkan semuanya dengan jQuery untuk browser webkit. Seperti ini:

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

Saya punya solusi jika Anda ingin mencegah pengisian otomatis dari google chrome tetapi sedikit "parang", cukup hapus kelas yang ditambahkan google chrome ke bidang input tersebut dan atur nilainya menjadi "" jika Anda tidak perlu menampilkan menyimpan data setelah dimuat.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

Solusi Daniel Fairweather ( Menghapus warna latar belakang input untuk Chrome autocomplete? ) (Saya akan senang untuk meningkatkan solusi, tetapi masih perlu 15 rep) bekerja sangat baik. Ada perbedaan yang sangat besar dengan solusi yang paling banyak dipilih: Anda dapat menyimpan gambar latar belakang! Tapi sedikit modifikasi (hanya periksa Chrome)

Dan Anda perlu diingat, itu HANYA berfungsi pada bidang yang terlihat !

Jadi Anda jika Anda menggunakan $ .show () untuk formulir Anda, Anda harus menjalankan kode ini Setelah acara () acara

Solusi lengkap saya (saya memiliki tombol tampilkan / sembunyikan untuk formulir masuk):

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

Maaf lagi, saya lebih suka itu menjadi komentar.

Jika Anda mau, saya bisa meletakkan tautan ke situs tempat saya menggunakannya.

dan ini berhasil untuk saya (Chrome 76 diuji)

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

Saya mencoba hampir semua solusi di atas. Tidak ada yang berhasil untuk saya. Akhirnya berhasil dengan solusi ini. Saya harap seseorang membantu ini.

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

Benjamin terima kasih!

Solusi Mootools sedikit lebih rumit, karena saya tidak bisa mendapatkan bidang dengan menggunakan $('input:-webkit-autofill'), Jadi apa yang saya gunakan adalah sebagai berikut:

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
}

Tidak ada solusi yang bekerja untuk saya, bayangan sisipan tidak akan bekerja untuk saya karena input memiliki latar belakang transparan yang dilapis di atas latar belakang halaman.

Jadi saya bertanya pada diri sendiri, "Bagaimana cara Chrome menentukan apa yang harus diisi otomatis pada halaman tertentu?"

"Apakah itu mencari id input, nama input? Form id? Form action?"

Melalui eksperimen saya dengan nama pengguna dan input kata sandi, hanya ada dua cara yang saya temukan yang akan menyebabkan Chrome tidak dapat menemukan bidang yang harus diisi otomatis:

1) Letakkan input kata sandi di depan input teks. 2) Beri mereka nama dan id yang sama ... atau tidak ada nama dan id sama sekali.

Setelah halaman dimuat, dengan javascript Anda dapat secara dinamis mengubah urutan input pada halaman, atau secara dinamis memberi mereka nama dan id ...

Dan Chrome tidak tahu apa yang menimpanya ... autocomplete rusak!

Retas gila, saya tahu. Tapi itu berhasil untukku.

Chrome 34.0.1847.116, OSX 10.7.5

Sayangnya, tidak ada satu pun solusi di atas yang berhasil di tahun 2016 (beberapa tahun setelah pertanyaan)

Jadi, inilah solusi agresif yang saya gunakan:

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

Pada dasarnya, ini menghapus tag sambil menyimpan nilai, dan membuatnya kembali, lalu mengembalikan nilai.

saya menggunakan ini. bekerja untukku. hapus latar belakang bidang kuning.

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

Seperti yang disebutkan sebelumnya, inset -webkit-box-shadow untuk saya bekerja paling baik.

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

Juga cuplikan kode untuk mengubah warna teks:

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

Ini bekerja untuk saya:

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