Как избежать применения стиля "-internal-autofill-selected"?

Question

У меня есть форма входа в систему с 2 полями, именем пользователя и паролем. Поле имени пользователя заполнено chrome. Когда я отправляю форму (когда она действительна), этот стиль применяется загадочно:

input:-internal-autofill-selected {s ñ
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

Есть ли способ избежать этого? Форма отправляется с использованием Ajax, поэтому немного уродливо, если для поля «Имя пользователя» применяется стиль, а для поля «Пароль» - нет.

Я заметил, что это происходит, только если поле заполнено элемент в списке chrome предложений. Если поле заполнено значением, которого нет в списке, стиль не применяется.

Regards Jaime

Answer 1

Вы можете просто добавить свой собственный CSS, чтобы обновленное состояние соответствовало вашему обычному состоянию ввода. Добавление дополнительного класса к вашему объявлению вместе с атрибутом! Important должно переопределить его.

Итак:

input.my-input {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

input.my-input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

Я также нашел это кстати: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/