Измените фон ввода на прозрачный в форме автозаполнения

Question

Я хотел установить прозрачный цвет фона для моего ввода, когда браузер автоматически заполняет мою форму, в настоящее время выглядит как добавленное изображение, кто-нибудь знает, как это сделать?

Я пробовал это, но он установлен на белый цвет, а границы - стиль с желтым по умолчанию, я хочу, чтобы цвет текста тоже был белым.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Вот как это выглядит:

Заранее спасибо:)

Answer 1

Наконец, я получаю результат с этим фрагментом кода:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

Answer 2

Используйте это, чтобы сэкономить ваше время

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   -webkit-transition-delay: 9999s;
   transition-delay: 9999s;
}

Answer 3

Спасибо martinezjc за идею, но если мы оставим страницу открытой в течение некоторого времени, мы заметим изменение фона

мы можем устранить переход, используя анимацию CSS и режим заливки вперед, чтобы сделать цвет фона постоянным

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

просто замените прозрачный на свой цвет

Answer 4

После нескольких часов поиска, вот лучший код, который работает jquery и javascript, что означает, что он делает поле прозрачным в соответствии с запросом

     input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

Отлично хорошо