こんにちは

WEBサイトの背景色にあわせて、フォームのオートコンプリート機能の背景色を変更したい場合の対処方法についてです。

【現象】

今回、背景色に黒が指定されているLPにフォーム入れ込む制作中の出来事です。

オートコンプリート機能が発動し、補完候補を選択して入力した項目の背景色が薄水色になってしまいました。

制作したフォームの項目がいくつかあり、手動で入力した項目は背景色がLP全体と同じ黒色のまま、オートコンプリートを使い入力した項目は背景色が薄水色という現象が起きました。

【オートコンプリート機能の背景色がつく仕組み】

ちなみにですが、オートコンプリート機能とは、過去の入力内容や、Googleのアルゴリズムにより自動で候補を算出しているそうです。

inputタグ内をクリックしてフォーカスしたときに、オートコンプリート機能により表示される候補をクリックすると自動でcssの疑似クラス「:autofill」がつきます。

この:autofill（:-webkit-autofill）にはデフォルトで背景色や文字色が指定されています。

それなら自身のcssで:autofill（:-webkit-autofill）に背景色を指定すればいいのではないかと思いました。

以下、背景色に黒色、文字色に白色を指定してみました。

input:-webkit-autofill{
    background-color: #3E3E3E;
    color: #fff;
}

しかし、効果ないようです。

スタイル定義には !important が使用されているため、cssの上書きはできないようです。

cssカスケーディングスタイルシートによると、background-color, background-image, color に独自の指定をすることはできないとのことです。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/:autofill

【対策】

box-shadowを使い内側を塗りつぶす方法でうまくいきました。

背景色を　＃3E3E3E（黒っぽい色）　に、文字色を　＃fff（白）に指定しています。

input:-webkit-autofill{
	box-shadow: 0 0 0px 1000px #3E3E3E inset;
    -webkit-text-fill-color: #fff !important;
}

【その後】

結論：オートコンプリート機能デフォルトのデザインのままで良かった

いろいろ調べてスタイルを当ててみたものの、

・ブラウザのデフォルト仕様は上書きできないようになっていること、

・今後、今回無理やり当てたbox-shadowも対策され使えなくなるかもしれないこと、

を考えると、無理に仕様を変えなくても良いのではという結論に至りました。

というわけで、結果採用されなかった対策方法ではございますが、どうしてもデフォルト仕様を変えたいというときに役に立つのではないかなと思いました。