cari
Rumahhujung hadapan webtutorial cssBagaimanakah Saya Boleh Mengatasi Autolengkap Penyemak Imbas dan Serlahkan Input dengan HTML dan CSS?

How Can I Override Browser Autofill and Input Highlighting with HTML and 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:


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!

Kenyataan
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
Kemas kini 'CSS4'Kemas kini 'CSS4'Apr 11, 2025 pm 12:05 PM

Sejak saya mula -mula berbunyi pada perkara CSS4¹, ada lebih banyak perbincangan di atasnya. Saya akan mengulangi pemikiran kegemaran saya dari orang lain di sini. Ada

Tiga jenis kodTiga jenis kodApr 11, 2025 pm 12:02 PM

Setiap kali saya memulakan projek baru, saya menyusun kod yang saya cari dalam tiga jenis, atau kategori jika anda suka. Dan saya fikir jenis ini boleh digunakan

HTTPS mudah!HTTPS mudah!Apr 11, 2025 am 11:51 AM

Saya ' telah bersalah secara terbuka merungut kerumitan HTTPS. Pada masa lalu, saya membeli sijil SSL dari vendor pihak ketiga dan menghadapi masalah

Panduan Atribut Data HTMLPanduan Atribut Data HTMLApr 11, 2025 am 11:50 AM

Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.

Memahami kebolehubahan dalam JavaScriptMemahami kebolehubahan dalam JavaScriptApr 11, 2025 am 11:47 AM

Sekiranya anda tidak bekerja dengan kebolehubahan dalam JavaScript sebelum ini, anda mungkin mudah mengelirukan dengan memberikan pembolehubah kepada nilai baru, atau penugasan semula.

Input bentuk gaya tersuai dengan ciri CSS modenInput bentuk gaya tersuai dengan ciri CSS modenApr 11, 2025 am 11:45 AM

Ia mungkin sepenuhnya untuk membina kotak semak tersuai, butang radio, dan suis bertukar hari ini, sambil tetap semantik dan boleh diakses. Kami tidak memerlukan

Watak nota kakiWatak nota kakiApr 11, 2025 am 11:34 AM

Terdapat watak nombor superset khas yang kadang -kadang sesuai untuk nota kaki. Di sini mereka:

Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptCara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptApr 11, 2025 am 11:29 AM

Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa