Chrome自动填充功能导致表单背景变白无法修复问题求助

API 探路者

2026-10-6

修复方案

该问题是Webkit内核浏览器（Chrome、Edge、Safari等）默认的表单自动填充UA样式优先级过高导致的，普通的background-color: transparent规则无法覆盖默认样式，你可以在现有的.email__field样式块中添加以下代码修复：

&__field {
    width: 100%;
    background-color: transparent;
    color: color(lightWhite);
    border: none;
    
    // 新增自动填充样式覆盖代码
    &:-webkit-autofill,
    &:-webkit-autofill:hover, 
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
        // 内阴影覆盖默认白色背景，将#xxxxxx替换为darkerGreen对应的实际色值即可
        -webkit-box-shadow: 0 0 0 30px #xxxxxx inset !important;
        // 设置文字颜色为指定亮白色
        -webkit-text-fill-color: color(lightWhite) !important;
        // 若需要保留透明背景，可添加以下过渡规则，将默认背景变化延迟到几乎不可感知
        // transition: background-color 5000s ease-in-out 0s;
    }
    // 兼容火狐浏览器
    &:-moz-autofill,
    &:-moz-autofill:hover,
    &:-moz-autofill:focus,
    &:-moz-autofill:active {
        box-shadow: 0 0 0 30px #xxxxxx inset !important;
        -moz-text-fill-color: color(lightWhite) !important;
    }
    
    &::placeholder{
        color: color(lightWhite);
    }

    &:focus {
        outline: none;
    }

    
    &__wrapper{
        display:flex;
        border-bottom: 1px solid white;
    }
}