被 Chrome 覆盖的 CSS

Question

谁能解释一下？

所以该工具显示 rgb(250,255,189) 被鲑鱼取代（因为 rgb 被划掉了）尽管显示的是鲑鱼，但摘要行和实际显示的颜色是 rgb(250... ) 颜色！

自动填充 css 似乎会覆盖我们可能想要设置的任何样式，但即使是 Chrome 开发人员工具似乎也不知道如何解释它，这已经够糟糕了......

我有一个比用户代理样式表更具体的规则，相同的定义但也指定了类，但 Chrome 的自动填充仍然获胜 - 任何解决方案？

谢谢

Answer 1

你可以试试-webkit-autofill

input {
  background-color: white;
}
/*input:focus {
  background-color: grey
}*/
input:-webkit-autofill{
  transition: background-color 1s ease-in-out 5000s;
}

body {
  background: #333;
  color: #fff;
  display: flex;
  font-size: 2em;
  justify-content: center;
}

<form>
  <div class="form-group">
    <label for="exampleInputFirst">First Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputFirst">
  </div>
  <div class="form-group">
    <label for="exampleInputLast">Last Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputLast">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email Address</label>
    <input type="email" class="form-control input-lg" id="exampleInputEmail">
  </div>
 
  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>

Answer 2

我认为您实际上遇到了webkit-autofill 的问题。但只有当 Chrome 自动填充您的输入字段时，该颜色才会出现。大概就是这样。

看看 MDN 的这句话：

https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill

许多浏览器的用户代理样式表在它们的 :- webkit-autofill 样式声明，使它们不能被网页覆盖，而无需借助 JavaScript hack。

所以我想这可能是个问题。您是否尝试在隐身窗口中查看页面？这样 Chrome 的自动填充功能就不会开启吗？