Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mengatasi Autolengkap Borang Penyemak Imbas Lalai dan Serlahkan dengan CSS?

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

Susan Sarandon
Lepaskan: 2024-12-07 05:38:16
asal
348 orang telah melayarinya

How Can I Override Default Browser Form Autofill and Highlighting with 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>
Salin selepas log masuk

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 */
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan