Bagaimana untuk mengalih keluar gaya lalai yang ditambahkan secara automatik oleh penyemak imbas apabila borang diisi secara automatik dalam kemahiran browser_javascript Chrome

1. Sebab masalah ini ialah semasa menulis halaman log masuk akaun, imej latar belakang telah ditambahkan pada borang input Apabila ia diisi secara automatik, latar belakang kuning muda muncul.

Sebabnya ialah saya tergesa-gesa menetapkannya terus dalam elemen input, dan masalah itu datang. Jadi jika anda meletakkan ikon ini di luar borang input, masalah ini tidak akan berlaku.

2. Cara menangani dan mengelakkan gaya lalai penyemak imbas yang akan ditambahkan pada isian automatik borang

Gambar kedua ialah selepas borang diisi secara automatik, chrome akan menambah input:-webkit-autoisi atribut peribadi pada borang input yang diisi secara automatik secara lalai

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

Apabila saya melihat kod ini ditambahkan di sini, saya akan terfikir untuk menggunakan gaya ganti untuk menyelesaikannya. Saya pasti boleh menggunakan !important untuk meningkatkan keutamaan. Tetapi ada masalah, tambah! penting tidak boleh menimpa latar belakang asal dan warna fon Kecuali definisi lalai chrome bagi warna latar belakang, imej latar belakang, warna tidak boleh digunakan

!penting meningkatkan keutamaan. Atribut lain boleh menggunakannya untuk meningkatkan keutamaan.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

Terdapat dua idea 1. Betulkan pepijat melalui tampalan. 2. Matikan fungsi pengisian borang terbina dalam penyemak imbas

Senario 1: Kotak teks input mempunyai latar belakang warna pepejal

Penyelesaian:

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

Senario 2: Kotak teks input menggunakan latar belakang gambar

Penyelesaian:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

Mula-mula tentukan sama ada ia adalah krom Jika ya, lewati elemen input:-webkit-autofill, dan kemudian laksanakannya melalui operasi seperti pengambilan nilai, penambahan dan pengalihan keluar. Kaedah ini tidak berfungsi! !

Jadi akhirnya, saya tidak menggunakan ikon sebagai imej latar belakang borang input, sebaliknya, saya menulis label tambahan dan mengambil ikon di luar borang.

Idea 2: Matikan fungsi pengisian borang terbina dalam penyemak imbas

Tetapkan atribut borang autocomplete="off/on" untuk mematikan borang pengisian automatik dan ingat kata laluan itu sendiri

19938c4b9f52a73c98d6a33264dfaf4f
4fdc4dcabbeb6ca10b364d42cbb16066
85e03a8181f16578d1f8c113d9ad4dfd
8b31a5d7c9c3c17c93e049608459954f

Seperti yang ditunjukkan dalam gambar: Sebelum pengisian automatik, ikon kecil peti mel ini ialah imej latar belakang borang input

Seperti yang ditunjukkan dalam gambar: Selepas mengisi, ikon peti mel kecil ditimpa oleh gaya lalai penyemak imbas

Akhir sekali,

Jika anda tidak mahu berurusan dengan menambah gaya lalai apabila borang diisi secara automatik dalam penyemak imbas Chrome, maka letakkan ikon kecil ini di luar borang kerana ia adalah kotak input

Hanya sempadan-bawah Jika kotak input mempunyai sempadan, anda mungkin perlu menggunakan sempadan div untuk berpura-pura sebagai sempadan kotak input, dan kemudian menjadikan kotak input tidak mempunyai sempadan.

Kotak input seperti ini

Melalui kaedah di atas, saya berjaya membantu rakan saya menyelesaikan masalah menambah gaya lalai secara automatik dalam pelayar Rakan boleh merujuk artikel ini dengan yakin.