Bagaimanakah Saya Boleh Mengatasi Autolengkap Borang Penyemak Imbas Lalai dan Serlahkan dengan CSS?

Timpa Kelakuan Borang Penyemak Imbas Lalai dengan CSS

Pelayar web selalunya mengisi secara automatik medan borang dan menyerlahkan medan input dengan latar belakang kuning. Walaupun mudah untuk sesetengah pengguna, ia boleh menjadi tidak diingini dalam senario tertentu. Mari kita terokai cara untuk mengatasi gelagat lalai ini dalam HTML dan CSS.

Lumpuhkan Pengisian Automatik Borang

Untuk mengelakkan borang daripada diisi secara automatik, gunakan atribut autolengkap pada teg borang. Contohnya:

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

Walau bagaimanapun, atribut ini mungkin tidak disokong sepenuhnya dalam semua penyemak imbas.

Alih Keluar Sorotan Input

Untuk mengatasi lalai penyerlahan latar belakang kuning untuk medan input, gunakan peraturan CSS berikut:

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}

Kod ini menetapkan warna latar belakang untuk medan input yang diisi secara automatik oleh penyemak imbas. Dengan menggunakan !important, anda boleh memastikan bahawa peraturan ini diutamakan daripada mana-mana gaya lain.

Petua Tambahan

Jika peraturan CSS di atas tidak berfungsi dalam versi yang lebih baharu Chrome, cuba gunakan helah ini:

input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset; /* Change color to background */
  -webkit-text-fill-color: #333;
}

Ini mewujudkan bayang-bayang "kuat" di sekeliling medan input, dengan berkesan menyembunyikan latar belakang kuning.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengatasi Autolengkap Borang Penyemak Imbas Lalai dan Serlahkan dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!