Bagaimana untuk Menghalang Autolengkap Chrome daripada Menukar Fon Anda?

Mengatasi Cabaran Perubahan Fon Autolengkap Chrome

Apabila menghadapi ciri autolengkap Chrome pada Windows, anda mungkin menghadapi isu perubahan fon yang menjengkelkan. Apabila menuding pada nama pengguna yang disimpan, saiz dan gaya fon berubah, mengganggu penjajaran borang anda. Walaupun anda boleh menggunakan lebar tetap pada input untuk mengurangkan masalah ini, penyelesaian yang lebih berkesan terletak pada menghalang perubahan fon sama sekali.

Untuk mencapai ini, anda boleh menggunakan peraturan CSS yang menyasarkan secara khusus :-webkit-autofill kelas pseudo. Kelas pseudo ini digunakan pada kawasan borang yang diisi secara automatik oleh pengurus kata laluan Chrome. Dengan menggunakan penting pada sifat keluarga fon dalam peraturan ini, anda boleh mengatasi gelagat lalai Chrome dan mengekalkan tetapan fon yang anda inginkan.

Berikut ialah contoh cara anda boleh melaksanakan perkara ini dalam SCSS:

input {
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      font-family: Times, "Times New Roman", serif !important;
    }
  }
}

Sebagai alternatif, anda mungkin hanya memerlukan peraturan berikut:

input {
  &:-webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}

Elemen pseudo baris pertama menyasarkan baris pertama input, yang biasanya di mana autolengkap berlaku.

Dengan memasukkan peraturan CSS ini, anda boleh menghalang perubahan fon autolengkap Chrome dengan berkesan, mengekalkan penjajaran dan estetik borang log masuk anda.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Autolengkap Chrome daripada Menukar Fon Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!