【CSS】input要素に自動で挿入される際の薄水色の背景色を無くしたい

背景に写真を使ったフォームを作成時、入力補助のオートコンプリートで自動入力された際に背景色として薄水色がinput要素についてしまうので何とかしたときの備忘録

cssで上書きする

cssオートコンプリート時の背景色を変更

/* box-shadow:水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset;*/
input:-webkit-autofill{
	box-shadow: 0 0 0px 1000px [色] inset;
}

テキストの色を変えるときは以下のコード（デフォルトだと黒）

-webkit-text-fill-color: white !important;

ただ、この書き方はオートコンプリート時の背景色を変更するわけでなくシャドウをかけて塗りつぶしているだけに過ぎずtransparentのように透明にすることはできない

なのでオートコンプリート機能を切る必要がある

オートコンプリート機能を切る方法

フォーム要素のautocomplete属性を切る

<form autocomplete="off">
…
</form>

これでオートコンプリート機能を切れ…あれ？オートコンプリート機能動くぞ？？？

あ、調べたら無理っぽいわ

以前からオートコンプリート機能を切る方法の記事はあるけど、その対策が少し経つと使えなくなり、また新しい方法といたちごっこの歴史があるみたい

だから、オートコンプリート機能を切ることは諦める

一応、wordpressのプラグインContactForm7でform要素にautocomplete="off"をつける方法調べたので以下に書いとく

ContactForm7で「autocomplete=”off”」を追加する方法

フィルターフックwpcf7_form_autocompleteが用意されているのでそれを使用

function custom_wpcf7_form_autocomplete(){
    return 'off';
}
add_filter('wpcf7_form_autocomplete', 'custom_wpcf7_form_autocomplete', 10, 1);

結局効かなかったけどね(chrome)