浏览器自动填充触发-webkit-autofill伪类导致输入框背景强制变白，解决方案包括：用transition延时欺骗渲染、内阴影覆盖背景色、设置文字颜色，并针对number类型添加装饰容器样式。
这个问题本质是浏览器自动填充（autofill）机制触发的默认样式覆盖，尤其在华为、小米、OPPO 等厂商定制的安卓浏览器（如搜狗、UC、华为自带浏览器）中表现明显——即使你设置了 background-color: transparent 或 #0091db，输入框在被自动填充后仍会强制显示白色背景。
核心原因：-webkit-autofill 伪类劫持样式
当浏览器自动填充账号、密码、手机号等内容时，会为 input 元素添加一个内部伪类 :-webkit-autofill，并赋予它高优先级的默认背景色（通常是纯白），且该样式无法被普通 CSS 规则直接覆盖，哪怕加了 !important 也无效。
可靠有效的 CSS 解决方案
以下写法经实测在华为手机搜狗浏览器、小米浏览器、OPPO 浏览器等主流国产安卓环境下均有效：
- 用
transition延时“骗过”浏览器渲染：input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s; }
利用极长的过渡时间让背景色延迟生效，实际视觉上等于没变色。 - 叠加内阴影覆盖白色背景：
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #0091db inset; -webkit-text-fill-color: #fff !important; }
注意把1000px和#0091db替换为你页面的真实主色和背景色值。 - 配合字体颜色控制（避免文字发黑看不清）：
input:-webkit-autofill { -webkit-text-fill-color: #fff !important; }
辅助手段：从源头减少触发机会
如果业务允许，可降低 autofill 触发概率：
- 给 input 添加
autocomplete="off"或更细粒度的值，例如：<input type="text" autocomplete="new-password">
（对密码类字段较有效；但现代浏览器对off支持不一，建议搭配 CSS 方案使用） - 避免 input 的
name或id出现敏感词，如password、pwd、mobile、tel等，否则易被浏览器误判为可填充字段。
特别注意华为搜狗浏览器的 number 类型异常
针对你提到的 type="number" 在华为搜狗浏览器中出现白色背景框的问题，除上述 autofill 方案外，还需额外处理其内部装饰容器：
- 加上这条规则可覆盖其底层白色块：
input[type="number"]::-webkit-textfield-decoration-container { background-color: #0091db !important; } - 若仍残留边框，补上：
input[type="number"] { border: none; outline: none; }
