表单输入框自动填充文本颜色无法设为白色的原因及解决方法

要解决webkit内核浏览器（如Chrome）中自动填充文本颜色不生效的问题，需要添加-webkit-text-fill-color属性强制覆盖浏览器默认样式，修改后的CSS如下：

input:-webkit-autofill {
  background-color: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* 新增该行以控制自动填充文本颜色 */
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  box-shadow: 0 0 0px 1000px #000 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

问题原因 #

Chrome等webkit内核浏览器在自动填充表单时，会通过内部样式强制指定文本颜色，常规的color属性优先级不足以覆盖这个默认样式。而-webkit-text-fill-color是webkit专属的文本填充控制属性，搭配!important可以强制覆盖浏览器的自动填充样式规则。

如果需要兼容Firefox浏览器，可补充以下CSS规则：

input:-moz-autofill {
  background-color: #000 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1000px #000 inset !important;
}

Firefox对自动填充文本颜色的控制逻辑更简单，直接使用color属性即可生效，无需额外专属属性。

内容的提问来源于stack exchange，提问作者coder