相關的輸入與WebKit的自動填充僞類

Question

我想樣式涉及與-webkit-自動填充僞類這樣的輸入同級造型標籤：

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> 

要收拾東西，我想要實現的是當輸入自動填充設置相同的背景色爲span元素。

Answer 1

您不能使用純CSS設計先前的兄弟。選擇器~與第一個元素後面的同級相匹配。

或設置爲一個能在MDN文檔讀取它：

的〜組合子分隔兩個選擇器和僅當它被第一先於第二元件相匹配，並且兩個共享一個公共的父。

https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors

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>