Chromeのオートコンプリートの背景色を消す

動機

autocomplete属性をoffにしてるにも関わらず入力が補完された。
そのせいで、ラベルにオートコンプリートの背景色が被さってしまいラベルの一部が隠れるような状態になった。
ちょっと検索しても出てくる情報はbox-shadowで背景色を隠すものがほとんどでそうなるとデザインを変更しないといけなくなるためこの方法は使えない。
で、さらに調べて以下の方法で背景色を変更できることを確認した。

対処法

@keyframes onAutoFillStart { from {} to {}}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s;
}

やってることとしては、Chromeでオートコンプリートが発生した要素については-webkit-autofillという属性が付くのでその要素に対してアニメーションを使用して背景色の変更を行なっている。
background-colorに対して!importantを使用しても変更できなかったが、上記の方法だとなぜかできた。

とりあえず、これで背景色については消すことができる。