Странные линии вокруг настраиваемого ввода автозаполнения (в Chrome и Opera) - PullRequest
Новая
       11

Странные линии вокруг настраиваемого ввода автозаполнения (в Chrome и Opera)

0 голосов
/ 21 апреля 2020

Я использую настроенный фоновый цвет для автозаполненных вводов в навигаторах webkit (Safari, Chrome, Opera), чтобы синхронизировать их с переносом div. Мой CSS выглядит так 

.myInputComponent:-webkit-autofill {
    transition: linear 0s;
    -webkit-box-shadow: 0 0 0 1000px var(--background-color) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);

    /* My last attempt */
    background-color: var(--background-color)!important;
}

Я не испытываю никаких проблем с Safari. Однако в Chrome и Opera при каждом автозаполнении ввода появляются странные яркие горизонтальные линии, окаймляющие мой ввод. Они исчезают, как только я снова изменяю вход (чтобы отменить состояние автозаполнения).

Автозаполнение ввода Chrome (аналогичные результаты в Opera)

Autofilled on Chrome

Возврат к нормальному состоянию, если не заполнен автоматически

enter image description here

Сравнение с автозаполнением в Safari

enter image description here

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

Примечание: значение моего --background-color var равно rgb (102, 102, 102)

enter image description here

Это еще более странно, потому что инспектор явно выбирает значение из пользовательского агента, но оно все равно отображается сверху как выбранное значение.

Является ли это каким-либо способом избавиться от этих строк?

...