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>

为了清楚起见，我想要实现的是在自动填充输入时为 span 元素设置相同的背景颜色。

Answer 1

您不能使用纯 CSS 为前面的同级元素设置样式。选择器 ~ 匹配第一个元素之后的兄弟。

或者可以在 MDN 文档中阅读:

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

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>