Menghapus warna latar belakang input untuk pelengkapan otomatis Chrome?


653

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?


2
Di sini Anda memiliki informasi yang lebih luas: stackoverflow.com/questions/2338102/…
dasm

Lihat jawaban saya ke posting serupa: stackoverflow.com/a/13691346/336235
Ernests Karlsons

Jawaban:


1170

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.


1
Di Chrome sekarang, daftar pengguna menggunakan stylesheet :-internal-autofill-previeweddan :-internal-autofill-selectedpseudoclasses alih-alih -webkit-autofill... Secara misterius, -webkit-autofillmasih berfungsi. Saya pribadi tidak membutuhkannya !important.
Andy

Saya tidak memerlukan penyeleksi semu / fokus / aktif semu
antoine129

318

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


Bekerja seperti pesona.
Lalnuntluanga Chhakchhuak

1
Ini pasti berhasil! (Chrome 79)
Lashae

3
Saya menemukan ini lebih baik daripada jawaban yang diterima ... metode box-shadow pintar dan berfungsi, tetapi ketika pengguna memilih nilai untuk pengisian otomatis, warna default akan berkedip sebentar di bidang input, yang bisa menyusahkan jika input Anda memiliki latar belakang gelap. Solusi ini tidak memiliki masalah seperti itu. Bersulang!
skwidbreth

Sempurna! Bekerja namun lebih baik dari yang saya harapkan!
sdlins

2
Ini berfungsi untuk Vuetify 2 terutama jika Anda mengaturcolor: inherit
Marc

276

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

7
Luar biasa, saya juga membutuhkan latar belakang yang transparan. PS: jangan lupa -webkit-text-fill-color: yellow !important;untuk warna teks.
gfpacheco

Ini masih akan menunjukkan latar belakang pengisian otomatis saat input telah disembunyikan / ditunjukkan dengan display. Fiddle - Lihat itu
Martin

27
Daripada mengatur terlalu transition-durationtinggi, akan lebih baik untuk mengatur transition-delaysebaliknya. Dengan cara itu Anda mengurangi lebih jauh kemungkinan perubahan warna.
Shaggy

The transitionhack akan bekerja hanya jika input tidak otomatis diisi dengan entri default direkam oleh browser, jika latar belakang kuning akan tetap ada.
guari

1
Solusi hebat .... tetapi mengapa ini bekerja? Dan mengapa pengaturan background-colortidak berfungsi? Chrome perlu memperbaiki ini !!
TetraDev

60

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

6
Saya telah menetapkan gambar sebagai latar belakang bidang input, solusi ini menghilangkan warna kuning, tetapi gambar latar belakang masih tersembunyi
Matteo Tassinari

Solusi terbaik sejauh ini, bekerja sangat baik dengan yang ada box-shadowuntuk validasi
Yoann

chrome mengatakan "color 9999s ease-out, background-color 9999s ease-out";valrs exprssion tidak. Saya menggunakan kode itu, -webkit-transition: background-color 9999s ease-out;dan-webkit-text-fill-color: #fff !important;
naanace

1
bekerja tetapi tanpa penawaran ganda untuk saya;)
Jon

@Yoann, bagaimana tepatnya cara kerjanya dengan box-shadowvalidasi yang ada ? Dalam kasus saya, karena aturan css ini, bayangan kotak merah khusus saya (yang menunjukkan kesalahan input) tertunda, membuat pengguna percaya bahwa input terbaru tidak valid padahal sebenarnya bagus.
Paul Razvan Berg

50

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.


22
terima kasih tetapi aturan CSS webkit tidak berfungsi. Lembar gaya agen pengguna selalu mengesampingkan warna latar belakang, bahkan dengan itu (a) diatur ke !importantdan (b) ditargetkan dengan ID untuk spesifisitas yang lebih tinggi. Sepertinya Chrome akan selalu menimpanya. Menghapus autocomplete sepertinya berhasil, tetapi sebenarnya bukan itu yang ingin saya lakukan.
DisgruntledGoat

1
Beberapa orang memiliki masalah yang sama, apakah Anda memeriksa posting bug? code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour

6
Chrome memblokir semua upaya CSS untuk menimpa warna kuning itu. Pengaturan autocomplete="off"tentu saja akan meningkatkan masalah aksesibilitas. Mengapa jawaban ini ditandai sebagai benar?
João

2
Ini adalah solusi yang baik tetapi jika Anda menggunakan Bereaksi, itu akan mengeluh bahwa autocomplete adalah properti DOM yang tidak dikenal. Karena itu, sebenarnya autoComplete (note camelcased).
Tim Scollick

2
Mematikan
pelengkapan

30

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

2
Ini adalah solusi yang benar-benar berfungsi, kami tidak ingin melewatkan latar belakang kuning hanya beberapa kali, karena jawaban yang diterima akan menghasilkan.
davidkonrad

22

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

Bagi yang penasaran, warna latar tidak berpengaruh. -Webkit-box-shadow adalah bit pintar yang menimpa latar kuning di Chrome
Geuis

19

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

Saya telah menetapkan gambar sebagai latar belakang bidang input, solusi ini menghilangkan warna kuning, tetapi gambar latar belakang masih tersembunyi
Matteo Tassinari

Ini adalah satu-satunya yang bekerja untuk saya di Chrome 83. Yang paling banyak memilih bekerja sampai Chrome 82.
sdlins

19

KELANCANGAN

input:-webkit-autofill

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

1
Ini sebenarnya bekerja untuk saya karena jawaban yang diterima berkedip kuning pucat.
CleoR

solusi terbaik imho
Jan Paepke

15

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


11

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

10

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.


10

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

Sampai sekarang di Chrome 50.xx terbaru, ITU bekerja dengan sangat baik. Terima kasih banyak!
vivekkupadhyay

2
Daripada mengatur terlalu transition-durationtinggi, akan lebih baik untuk mengatur transition-delaysebaliknya. Dengan cara itu Anda mengurangi lebih jauh kemungkinan perubahan warna.
Shaggy

@Shaggy terima kasih, saya baru saja mengubahnya ke penundaan. Jauh lebih bagus.
Alex

9

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

Ini adalah jawaban terbaik setelah mencoba semua tanggapan.
gfcodix

8

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

Ini tampaknya menjadi solusi terbaik, meskipun memblokir cek surat Kicksend . Ada ide tentang cara mengatasi ini?
João

Ini bukan solusi yang baik karena kata sandi lengkap Google chrome berhenti berfungsi. Itu awalnya Anda mengisi nama dan Google chrome otomatis mengisi kata sandi. Namun begitu javascript di atas dijalankan, nama akan dihapus dan diatur kembali, dan kata sandi yang diisi otomatis hilang
vanval

6

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.


yah, itu berfungsi sebagian besar .. sayangnya kata sandi saya hilang. Mencoba mendapatkannya untuk menyimpan kata sandi terlebih dahulu dan mengatur ulang setelah loop tetapi chrome tampaknya memiliki beberapa masalah dengan itu. mmmm
Dustin Silk

6

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 tidak berhasil untuk saya?
Ikechukwu Eze

5

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

Bagus, dan thanx untuk kode SASS!
Bernoulli,

4

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

3

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

3

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

3

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.


3

dan ini berhasil untuk saya (Chrome 76 diuji)

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

3

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

Ini tidak berfungsi (lagi) dan disalin dari Trik CSS BTW
Bernoulli IT

1
Ini berhasil untuk saya.
AzizStark

2

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
}

2

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


2

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.


Solusi oleh namrouti yang dibiayai berfungsi dengan baik untuk saya di Chrome 51.0.2704.106 / OSX 10.11.5.
Oens

2

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

1

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

1

Ini bekerja untuk saya:

padding: 5px;
background-clip: content-box;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.