
Tarayıcılarda otomatik tamamlama stillendirilmesi
Önümüzdeki yıllarda vendor prefix uygulamaların kalkacağını şimdiden hissetsek de, şuan aralarında farklı tutarsızlıklar barındıklarını görüyoruz. Google Chrome ve Safari gibi -webkit parametrelerinin aktif olduğu tarayıcılarda, kullanıcılarına sunduğu otomatik doldurma kısımlarının stillerini -webkit-autofill ile değiştirebilmekteyiz.
Henüz sadece background, border ve birkaç özelliği etkileye bilirsiniz. En azından tasarımlarınızı, o iğrenç sarı arka plan rengiden kurtarabilirsiniz.
CSS
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; }
SCSS
@mixin Autocomplete($border, $color, $shadow, $scolor) { input, select, textarea { &:-webkit-autofill { &:hover, &:active, &:focus { border: $border solid $color; -webkit-text-fill-color: $color; -webkit-box-shadow: $shadow $scolor inset; transition: background-color 5000s ease-in-out 0s; } } } }