css 被 Chrome 覆盖

Question

有人能解释一下吗？

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

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

我有一个比用户代理样式表更具体的规则，相同的定义，但也指定了 class，但 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

The user agent style sheets of many browsers use !important in their :- webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.

所以我想这可能是个问题。您是否尝试过以隐身模式查看页面 window？这样 Chrome 的 auto-fill 功能就不会打开？

css 被 Chrome 覆盖

css overridden by Chrome

css

google-chrome

chromium