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 元素设置相同的背景颜色。

score 1 · Accepted Answer

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

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

~ 组合符分隔两个选择器，并且仅当第二个元素在第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

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