Ubah Gaya Pelengkap Automatik dalam Penyemak Imbas WebKit - Trik CSS

Kami mendapat tip yang baik dari Lydia Dugger melalui e-mel dengan kaedah untuk mengubah gaya yang digunakan oleh penyemak imbas WebKit untuk bidang borang yang telah dilengkapkan secara automatik.

Apa yang kami maksudkan dengan pelengkapan automatik

Banyak penyemak imbas (termasuk Chrome dan Safari) menyediakan tetapan yang membolehkan pengguna secara automatik mengisi butiran untuk bidang borang biasa. Anda telah melihatnya semasa melengkapkan borang yang meminta perkara seperti nama, alamat, dan e-mel.

Puncanya adalah bahawa pengguna mesti mengaktifkan tetapan ini agar coretan ini berkesan. Sekiranya tetapan diaktifkan, penyemak imbas WebKit akan menggayakan bidang yang telah dilengkapkan secara automatik untuk pengguna, seperti:

Perhatikan bagaimana bidang yang dilengkapkan secara automatik mempunyai latar belakang kuning? Itulah yang kami maksudkan dan akan berubah dengan coretan ini.

Coretan

Kita dapat menggunakan -webkit-autofillpemilih pseudo untuk menargetkan bidang tersebut dan menggayakannya sesuai yang kita sukai. Gaya lalai hanya mempengaruhi warna latar belakang, tetapi kebanyakan sifat lain berlaku di sini, seperti borderdan font-size. Kami bahkan boleh mengubah warna teks menggunakan -webkit-text-fill-coloryang disertakan dalam coretan di bawah.

/* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus ( border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; )