Lydia Dugger'dan e-posta yoluyla, WebKit tarayıcılarının otomatik tamamlanan form alanlarına uyguladığı stilleri değiştirmek için bir yöntem içeren güzel bir ipucu aldık.
Otomatik tamamlama ile ne demek istiyoruz
Çoğu tarayıcı (Chrome ve Safari dahil), kullanıcıların ortak form alanlarının ayrıntılarını otomatik olarak doldurmasına olanak tanıyan bir ayar sağlar. Ad, adres ve e-posta gibi şeyleri soran bir formu doldururken bunu gördünüz.
İşin püf noktası, bu pasajın etkili olabilmesi için kullanıcıların bu ayarı etkinleştirmiş olması gerektiğidir. Ayar etkinleştirilirse, WebKit tarayıcıları kullanıcı için otomatik olarak tamamladığı alanları şu şekilde biçimlendirir:
Otomatik tamamlanan alanların nasıl sarı bir arka plana sahip olduğuna dikkat edin. Bahsettiğimiz şey bu ve bu pasajla değiştireceğiz.
Snippet
-webkit-autofillBu alanları hedeflemek ve uygun gördüğümüz şekilde biçimlendirmek için sözde seçiciyi kullanabiliriz. Varsayılan stil sadece arka plan rengini etkiler ama çoğu diğer özellikler gibi burada uygulamak borderve font-size. -webkit-text-fill-colorAşağıdaki pasajda bulunan metnin rengini bile değiştirebiliriz .
/* 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
CodePen'de CSS-Tricks (@ css-tricks) tarafından WebKit'te Kalem Değiştir Otomatik Tamamlama Stillerine bakın.