本文结合网络上的其他教程，基于不阻止浏览器填充的前提做一个进阶做法和补充，特别是应付在使用UI组件时需要动态获取组件原有颜色的情况。原理：在浏览器覆盖原有输入框背景颜色后，额外再进行一次覆盖。

颜色值硬编码（简易）

使用截图软件或是其他能够拾取组件颜色的工具，拾取出UI组件各状态下的原有（被浏览器覆盖前）颜色rgb值，替换到下方各个状态的rgb颜色值即可，如有需求还可以将rgb设置为rgba增加透明度值👇

/* -webkit-text-fill-color是经过填充后输入框背景颜色  */
/* box-shadow是经过填充后输入框内的文字颜色  */
/* 如果还需要加动画过渡的持续时间：transition: background-color 2s ease-in-out;*/

/* 如果你的输入框颜色没有区分多种状态（悬停时变色、聚焦时变色等...）
那么可以写到一起👇 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
  box-shadow: 0 0 0px 1000px rgb(37, 54, 71) inset !important;
}

/* 单独修改各状态的颜色
光标未聚焦时 */
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px rgb(37, 54, 71) inset !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
}
/* 悬停时 */
input:-webkit-autofill:hover {
  box-shadow: 0 0 0px 1000px rgb(46, 62, 78) inset !important;
}
/* 单击时 */
input:-webkit-autofill:active {
  box-shadow: 0 0 0px 1000px rgb(64, 80, 94) inset !important;
}
/* 光标聚焦时*/
input:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px rgb(64, 80, 94) inset !important;
}

从CSS变量名动态获取颜色（复杂）

根据CSS变量名实现动态获取和替换

1. 打开F12控制台-元素面板，用定位器定位到需要修改的输入框上，在定位到的位置一个一个删除class名，确定影响组件颜色的类名。
2. 继续深入，全局搜索这个类名，查看类中具体使用的颜色变量名（还可能会有opacity值）。
3. 在main.css或者能被全局导入的css文件中添加下方示例代码。
4. 可以看到示例中的背景颜色box-shadow定义了两个var变量名，将前几步找到的变量名替换入示例对应位置使用即可，分别代表rgb颜色和根据自身需求附带的opacity透明度，最终组成rgba所需的四个值。如果不需要写opacity则可以连着前方小逗号一起去掉。（这种方式其实容易出错因为opacity的值可能会错，也可以自己一次一次尝试相似值，然后写死在rgba内容后方）

/* 根据CSS变量名动态获取方法 */
/* -webkit-text-fill-color是经过填充后输入框背景颜色  */
/* box-shadow是经过填充后输入框内的文字颜色  */
/* 如果还需要加动画过渡的持续时间：transition: background-color 2s ease-in-out;*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
  box-shadow: 0 0 0px 1000px rgba(var(--rgb),var(--opacity)) inset !important;
}