Google Chrome автозаполнения меняет цвет фона? - PullRequest
1 голос
/ 07 октября 2019

Я пытаюсь изменить цвет фона автозаполнения на своих входах.

Кажется, что принятые ответы онлайн выглядят примерно так:

Удаление цвета фона вводадля автозаполнения Chrome?

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Похоже, что это работает в одной ситуации, когда поля уже заполнены автоматически.

Значение Я обновляю браузер, и поляуже предварительно заполнены именем пользователя / паролем.

Когда я наведите курсор мыши или щелкните на входе, цвет фона изменится. Однако, когда я ничего не делаю, box-shadow как никакой эффект, и он все еще установлен по умолчанию user agent stylesheet.

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

Я также попробовал некоторые случайные свойства без успеха.

input:-internal-autofill,
input:-internal-autofill:hover, 
input:-internal-autofill:focus, 
input:-internal-autofill:active,

Chrome Версия 77.0.3865.90 (Официальная сборка) (64-разрядная версия)

Не могу понять, как это переопределить вообще. Как будто он был добавлен внизу правил CSS с important, который невозможно переопределить?

1 Ответ

1 голос
/ 07 октября 2019

Box shadow работает для меня, попробуйте код ниже. Вы можете изменить цвет тени согласно вашему требованию.

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px white inset;
}

Inspect Element

...