与具有 webkit 自动填充伪类的输入相关的样式标记

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>

为了澄清问题，我想要实现的是当输入自动填充时为 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>