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

Question

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

В дизайне, над которым я работаю, используется светлый текст на темном фоне, так что это действительно портит внешний вид формы - у меня резкие желтые прямоугольники и почти невидимый белый текст. Как только поле сфокусировано, поля возвращаются в нормальное состояние.

Можно ли остановить Chrome, изменяя цвет этих полей?

Answer 1

Это отлично работает, Вы можете изменить стили ввода, а также стили текста внутри поля ввода:

Здесь вы можете использовать любой цвет, например. white, #DDD, rgba(102, 163, 177, 0.45).

Но transparent здесь не сработает.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Кроме того, вы можете использовать это для изменения цвета текста:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Совет: Не используйте чрезмерный радиус размытия сотнями или тысячами. Это бесполезно и может привести к загрузке процессора на более слабых мобильных устройствах. (Также верно для реальных внешних теней). Для обычного поля ввода высотой 20px «радиус размытия» 30px идеально его охватит.

Answer 2

Предыдущие решения по добавлению рамки-тени хорошо работают для людей, которым нужен однотонный фон. Другое решение добавления перехода работает, но необходимость установить длительность / задержку будет означать, что в какой-то момент он может появиться снова.

Мое решение состоит в том, чтобы вместо этого использовать ключевые кадры, чтобы всегда отображались цвета по вашему выбору.

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Пример Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Answer 3

У меня есть лучшее решение.

Установка фона на другой цвет, как показано ниже, не решила проблему для меня, потому что мне нужно прозрачное поле ввода

-webkit-box-shadow: 0 0 0px 1000px white inset;

Итак, я попробовал еще кое-что и придумал:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

Answer 4

Это мое решение, я использовал переход и задержку перехода, поэтому у меня может быть прозрачный фон в моих полях ввода.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

Answer 5

Это было так, как задумано, так как это поведение окраски было от WebKit. Это позволяет пользователю понять, что данные были предварительно заполнены. Ошибка 1334

Вы можете отключить автозаполнение, выполнив (или на конкретном элементе управления формы:

<form autocomplete="off">
...
</form

Или вы можете изменить цвет автозаполнения, выполнив:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Обратите внимание, есть ошибка, отслеживаемая для этой работы снова: http://code.google.com/p/chromium/issues/detail?id=46543

Это поведение WebKit.

Answer 6

Возможный обходной путь на данный момент - установить «сильную» внутреннюю тень:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}  

Answer 7

попробуйте это для скрытия стиля автозаполнения

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

Answer 8

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

Answer 9

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

Answer 10

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

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

это полностью удалит желтый из полей ввода