フォームのオートコンプリート使用時に背景色を変更しないようにする

chromeでフォームのオートコンプリートを使用した際に背景色が水色に変更されますが、色を変更しないようにしたいということがあったので、対応方法を調べてみました。

サンプル

まずは対応前のサンプルです。

<form>
	<div class="form-item">
		<input type="text" name="company" placeholder="会社名">
	</div>
	
	〜 略 〜
	
	<div class="form-item">
		<input type="email" name="mail" placeholder="メールアドレス">
	</div>
	<div class="form-btn">
		<button>送信</button>
	</div>
</form>

オートコンプリートを使って入力すると、inputの背景が水色に変更されました。
対応前のデモページ

:-webkit-autofill擬似クラスを使うことで、inputのオートコンプリート時にCSSが適用されるようです。

input:-webkit-autofill {
	box-shadow: 0 0 0 1000px white inset;
}

backgroundの指定だと上書きできないようなので、box-shadowで重ねるようにしています。
whiteの部分を適宜変更してください。
CSSで対応後のデモページ

解決方法としては微妙ですが、オートコンプリートの機能自体を無効にすることでも色を変更させないという意味では対応できます。

<form autocomplete="off">

オートコンプリート自体を無効にするデモページ