html - webkit-autofill 疑似クラスを使用した入力に関連するタグのスタイリング

Question

次のように -webkit-autofill 疑似クラスを使用して、入力に関連する兄弟のスタイルを設定しようとしています。

input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}

しかし、うまくいきません。私がしようとしていることを達成することは可能ですか？または、これにはjavascriptに依存する必要がありますか?

HTML で更新:

<div>
  <span class="add-on icon-user"></span
  <input type="text" id="user_name" name="user[user_name]">
</div>

物事を明確にするために、私が達成したいのは、入力が自動入力されたときにスパン要素に同じ背景色を設定することです。

score 1 · Accepted Answer

純粋な CSS で前の兄弟をスタイルすることはできません。セレクター~は、最初の要素の後にある兄弟に一致します。

または、MDN ドキュメントで読むことができるように:

~ コンビネータは 2 つのセレクターを分離し、最初の要素が先行し、両方が共通の親を共有する場合にのみ、2 番目の要素と一致します。

input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}

次のスパンに一致します。

<div>
    <input type="text" id="user_name" name="user[user_name]">
    <span class="add-on icon-user"></span>
</div>

1 に答える 1