我设计了一个表单域，如图

但是当我使用圈在蓝色框中的自动填充时，背景和文本颜色会像这张图片

我的SCSS代码

.email__wrapper{

@include respond-to('small') {
    padding: 30px 10px;
}
.pork__container{
    padding: 146px 100px;
    background-color: color(darkerGreen);
    border-radius: 54px;
    background-image: url(./img/Fruit__CTA.png);
    background-position: center center;
    background-size: cover;
    @include respond-to('medium') {
        background-image: url(./Assets/Images/Submit_BG_Mob.png);
    }

    @include respond-to('medium') {
        flex-direction: column;
    }

    @include respond-to('small') {
        padding: 60px 22px;
    }
}


&__heading__wrapper {
    width: 100%
}

&__form__wrapper{
    width: 100%
}

&__heading{
    color: color(lightWhite);
    max-width: 296px;
    @include respond-to('medium') {
        text-align: center;
        margin: auto;
    }
}

&__paragraph{
    color: color(lightWhite);
    @include respond-to('medium') {
        text-align: center;
        margin-top: 47px;
    }
}

&__field {
    width: 100%;
    background-color: transparent;
    color: color(lightWhite);
    border: none;
    

    
    &::placeholder{
        color: color(lightWhite);
    }

    &:focus {
        outline: none;
    }

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


&__submit{
    background-color: transparent;
    border:none;
    background-image: url(./img/submit_BG.svg);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 9px;
    transform: scale(0.5);

}
.mc4wp-response, .mc4wp-response a{
    color: color(lightWhite);
}
.mc4wp-form-fields{
    margin-top: 30px;
    @include respond-to('medium') {
        margin-top: 47px;
        margin-bottom: 0px;
    }
}

.mc4wp-alert {
    margin-top: 20px;
    @include respond-to('medium') {
        text-align: center;
    }
}

}

该怎么解决这个问题？我也试过添加透明背景和其他东西。但什么都不管用。先

站点URL：https：//por-k-no.com/learn-more/.

顺晟科技：

从链接中我看到你给出的背景颜色为绿色。

.email__wrapper__field {
    width: 100%;
    background-color: #29711E;
    color: #F2F2F2;
    border: none;
}

把它改成

.email__wrapper__field {
    width: 100%;
    background-color: transparent;
    color: #F2F2F2;
    border: none;
}

希望能有所帮助。

背景不工作的自动填充尝试下面的CSS技巧

.email__wrapper__field {
    box-shadow: 0 60px 0px inset #29711e;
    -webkit-text-fill-color: #fff !important;
}