Kami mendapat tip bagus dari Lydia Dugger melalui email dengan metode untuk mengubah gaya yang diterapkan browser WebKit ke bidang formulir yang telah dilengkapi otomatis.
Yang kami maksud dengan pelengkapan otomatis
Banyak browser (termasuk Chrome dan Safari) menyediakan pengaturan yang memungkinkan pengguna mengisi detail secara otomatis untuk bidang formulir umum. Anda telah melihat ini saat mengisi formulir yang menanyakan hal-hal seperti nama, alamat, dan email.
Masalahnya adalah pengguna harus mengaktifkan setelan ini agar cuplikan ini efektif. Jika pengaturan diaktifkan, maka browser WebKit akan memberi gaya pada bidang yang telah dilengkapi otomatis untuk pengguna, seperti:
Perhatikan bagaimana bidang yang dilengkapi otomatis memiliki latar belakang kuning? Itulah yang kami maksud dan akan diubah dengan potongan ini.
Cuplikan
Kita bisa menggunakan -webkit-autofillpseudo-selector untuk menargetkan field tersebut dan mengatur style sesuai keinginan kita. Gaya default hanya memengaruhi warna latar belakang, tetapi sebagian besar properti lain berlaku di sini, seperti borderdan font-size. Kami bahkan dapat mengubah warna teks -webkit-text-fill-coloryang disertakan dalam potongan di bawah ini.
/* 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; )Demo
Lihat Pen Change Autocomplete Styles di WebKit oleh CSS-Tricks (@ css-trick) di CodePen.