Chrome オートコンプリート時の背景色

Question

WordPressのプラグインContact Form 7 add confirmを使用して、
フォームで確認画面が表示されるようにしています。

ただ、Chromeのオートコンプリート機能を使用すると、input要素の背景が黄色になってしまいます。

検索したところ、下記のCSSで背景色を変更刷ることができることが分かりました。
オートコンプリート機能自体はオフにしたくないので、CSSでの対応が望ましいと考えています。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset; // <= white の部分を好きな色に変える
}

さらに、確認画面で付与されるクラスである.wpcf7c-confを利用して、通常フォーム画面と、確認用フォーム画面とで背景色を変えたいと考えています。

// 確認画面用
input:-webkit-autofill.wpcf7c-conf {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset; // 確認画面では背景をなしにしたい
}

上記のように書いたのですが、背景色がwhiteのまま変わりません。
これはCSSの書き方が間違っているのでしょうか？

Answer 1

inputにclass="wpcf7c-conf"が指定されているんですよね？
使ったことないですが疑似クラスのようなので、

input.wpcf7c-conf:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}

こうかと思います。
またtransparentは透過なので後ろが白ければ白に黄色なら黄色になります。「なし」ではないです。一応。

Comments

[future]

素晴らしいです！
疑似クラスについての知識がなかったので、勉強したいと思います。
ありがとうございましたm(_ _)m