Bagaimanakah Saya Boleh Mengatasi Autolengkap Penyemak Imbas dan Serlahkan Input dengan HTML dan CSS?

Menggantikan Autolengkap Borang dan Penyerlahan Input Menggunakan HTML/CSS

Dalam pembangunan web, mengalih keluar cadangan autoisi yang dihasilkan oleh penyemak imbas dan penyerlahan input boleh menjadi masalah, terutamanya apabila berurusan dengan berbilang borang pada halaman yang sama. Artikel ini menangani kedua-dua isu, menyediakan penyelesaian untuk mengatasi pengisian automatik dan mengalih keluar penyerlahan latar belakang kuning.

Auto-Pengisian:

Pelayar secara automatik mencadangkan maklumat yang dimasukkan sebelum ini dalam medan input. Walaupun mudah untuk sesetengah pengguna, ia boleh menjadi masalah apabila borang yang berbeza pada halaman yang sama tidak boleh autolengkap. Untuk melumpuhkan autoisi bagi input tertentu, gunakan atribut autolengkap:

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

Penyertaan Input:

Secara lalai, penyemak imbas menggunakan latar belakang kuning apabila medan input adalah fokus. Tingkah laku ini boleh ditindih menggunakan CSS. Kelas pseudo :focus menyasarkan mana-mana elemen yang sedang dalam fokus. Begini cara untuk mengalih keluar serlahan kuning menggunakan CSS:

input:focus {
  background-color: transparent;
}

Walau bagaimanapun, ambil perhatian bahawa penyelesaian ini tidak lagi berfungsi dalam versi terkini Chrome. Sebaliknya, gunakan penggodam berikut:

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: 0 0 0 50px white inset;/*your box-shadow*/
  -webkit-text-fill-color: #333;
} 

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