自動補完でinputの背景色が変わらないようにする方法

はじめに

パスワードのinputを黒で実装していたら、Chromeの自動補完で白に変わるという不具合が発生、大変苦しんだので備忘録として残します。

背景色が変わる原因

自動補完後、下記のようなスタイルが適用されていました。

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}

対処方法

シンプルに自動補完後のスタイルを上書きする形で落ち着きました。

  input:-webkit-autofill {
    box-shadow: 0 0 0 1000px rgb(0, 0, 0) inset !important; // background-colorでは変わらないため、box-shadowを指定。
    -webkit-text-fill-color: #fff !important;
  }

  // 自動補完後のカーソルが黒になるので、合わせて変更。
  input:-webkit-autofill:focus {
    caret-color: #fff !important;
  }

サンプル

See the Pen input-autofill-color-sample by h-matcha (@h-matcha) on CodePen.

おまけ

ググった結果では下記のようなtransitionを指定する方法がよく出てきていました。
自分の場合は、残念ながら上手く効きませんでしたがメモとして残しておきます。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}