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;
      }
    }
  }
}