Masalah Fon Autolengkap Chrome: Bagaimana untuk Menghalang Perubahan Fon Medan Nama Pengguna/Kata Laluan?

Masalah Fon: Menghalang Pengubahsuaian Fon Autolengkap Chrome

Apabila mengisi automatik medan nama pengguna dan kata laluan dalam Chrome pada Windows, pengguna mungkin menghadapi isu yang ingin tahu: fon input berubah. Anjakan ini mengganggu penjajaran borang, menyebabkan kebimbangan bagi pembangun.

Semasa menetapkan lebar input tetap menyediakan penyelesaian cetek, ia gagal menangani masalah akar. Bolehkah kami menghalang perubahan fon secara berkesan?

Selepas bereksperimen dengan pelbagai teknik CSS, kami telah menemui pembetulan yang mudah dan berkesan:

<code class="css">input {
  -webkit-autofill-highlight-color: transparent;
  -webkit-autofill-highlight-box-shadow: none;
  -webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}</code>

Dengan mengubah suai ini gaya khusus penyemak imbas, kami menghalang ketidakkonsistenan berkaitan autolengkap:

• -webkit-autofill-highlight-color: transparent; melumpuhkan penyerlahan lalai.
• -webkit-autofill-highlight-box-shadow: none; mengalih keluar kiu visual di sekeliling medan autofill.
• -webkit-autofill::first-line { font-family : ...; } secara eksplisit menetapkan fon untuk baris pertama, dengan itu mengawal penampilan.

Mengehadkan peraturan CSS kepada ::-webkit-autofill memastikan ia hanya mempengaruhi Chrome pada Windows. Penyemak imbas dan sistem pengendalian lain tidak akan terjejas.

Dengan memanfaatkan gaya yang disesuaikan ini, kami menghalang perubahan fon dengan berkesan sambil mengekalkan kefungsian autolengkap.

Atas ialah kandungan terperinci Masalah Fon Autolengkap Chrome: Bagaimana untuk Menghalang Perubahan Fon Medan Nama Pengguna/Kata Laluan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!