自动填充时修改输入框文本颜色失效问题求助

在Chrome、Edge这类WebKit内核浏览器里，自动填充的输入框样式受浏览器内部规则限制，普通的color属性甚至加!important都可能被忽略。下面是两种可行的解决思路：

方案一：用WebKit私有属性强制设置文本颜色（推荐） #

WebKit提供了专门的-webkit-text-fill-color属性，能直接控制自动填充状态下的文本颜色，再配合box-shadow替换默认的自动填充背景：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 用inset阴影覆盖浏览器默认的黄色填充背景，把#你的深色背景色换成你实际使用的颜色 */
  -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important;
  /* 设置自动填充时的文本颜色为白色 */
  -webkit-text-fill-color: #fff !important;
}

为什么这个方案有效？ #

• -webkit-text-fill-color是WebKit专为文本填充设计的私有属性，优先级比普通color高，能绕过浏览器对自动填充样式的限制。
• 用box-shadow模拟背景比原来的过渡方案更直接，不会有延迟生效的问题。

方案二：禁用自动填充（业务允许的话） #

如果不需要输入框的自动填充功能，可以直接在HTML里设置属性禁用：

<!-- 全局禁用自动填充 -->
<input type="text" autocomplete="off">
<!-- 针对特定字段精准控制，比如避免密码被自动填充 -->
<input type="password" autocomplete="new-password">

注意：部分浏览器会忽略autocomplete="off"，用autocomplete="new-password"针对密码框通常能解决这个问题。

你的原有代码为啥不生效？ #

• input:-internal-autofill-selected是浏览器内部使用的伪类，属于非标准属性，浏览器会限制外部样式修改它，加!important也没用。
• 你原来的过渡代码只处理了背景色，没用到WebKit专用的文本颜色属性，所以color设置被浏览器内部样式覆盖了。

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