Форма автозаполнения Google Chrome и ее желтый фон
245
У меня проблема с дизайном Google Chrome и функцией автозаполнения формы. Если Chrome запоминает какой-либо логин / пароль, он меняет цвет фона на желтый.
Вот несколько скриншотов:
Как убрать этот фон или просто отключить автозаполнение?
Что касается стилей, этот цвет может быть серьезно связан с элементами дизайна, например, с выделением тегов ввода в Chrome, я бы больше хотел изменить цвет, чем отключить его.
Чтобы отключить автозаполнение, вы можете добавить autocomplete = "off" к вашему элементу ввода, например, <input type = "text" id = "input" autocomplete = "off">
joe_young
1
Просто дополнительная информация: я был укушен этим, когда у меня есть поле пароля. Мои поля подсвечены автоматически (желтым цветом) и заполнены странным значением. И я нашел решение здесь: zigpress.com/2014/11/22/stop-chrome-messing-forms ... Решение находится в разделе «Отключить автозаполнение Google Chrome» ... добавить скрытые поля.
Кокорда Рака
Ответы:
282
Измените «белый» на любой цвет, который вы хотите.
input:-webkit-autofill {-webkit-box-shadow:0001000px white inset !important;}
отличная идея. Я бы выбрал 50 или 100 всякий раз, когда достаточно (поля ввода обычного размера), чтобы избежать потенциальных падений производительности на более слабых устройствах. (И нет необходимости в пикселях после 0)
Фрэнк Нок
4
Люблю этот хак! Отличное мышление ... Все удаляют автозаполнение. Я хотел сохранить автозаполнение только для того, чтобы покататься на уродливом желтом.
Трэвис
1
Не работает, если у вас есть фоновые изображения за полем ввода, просто заполните всю область белым. Я попробовал все решения на этой странице, в том числе основанные на jquery, и они не сработали для меня, в конце концов мне пришлось добавить autocomplete = "off" в поле.
Myke Black
19
Чтобы также стилизовать цвет текста используйте -webkit-text-fill-color- смотрите этот вопрос
Эрвин Вессельс
2
есть ошибка, я не могу изменить синтаксис, но теперь это работает:box-shadow: inset 0 0 0 1000px white !important;
Мухаммед Умер
49
Если вам нужны прозрачные поля ввода, вы можете использовать переход и задержку перехода.
Лучшее решение для меня, поскольку значения цвета RGBA не работали в -webkit-box-shadow. Также устраняется необходимость указывать значения цвета для этого объявления: значения по умолчанию все равно будут применяться.
Себастьян
еще лучше использовать задержку перехода вместо ее продолжительности, чтобы вообще не смешивать цвета
antoine129
хорошо, но по какой-то причине мне пришлось перенести это правило в конец файла, иначе не сработало
if(navigator.userAgent.toLowerCase().indexOf("chrome")>=0){
$(window).load(function(){
$('input:-webkit-autofill').each(function(){var text = $(this).val();var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name='+ name +']').val(text);});});}
Это сработало, тогда как топовый ответ - нет. Однако я думаю, что я не буду пытаться изменить поведение, так как а). это javascript, поэтому между ним работает секунда, и он не работает (пока не загрузится js) и b). это может запутать пользователя chrome, который привык к поведению по умолчанию.
TK123
3
Мой хром только повторно применяет желтый цвет к новому входу :(
Дастин Шелк
Пожалуйста, не надо. Это не будет работать с любой платформой JS, только для статических сайтов.
Ахмедзянов Данилиан
26
В Firefox вы можете отключить все автозаполнения в форме с помощью атрибута autocomplete = "off / on". Аналогично, для автозаполнения отдельных элементов можно задать один и тот же атрибут.
К сожалению, это решение больше не работает в Chrome.
Генрирайт
1
Это крайне не рекомендуется, так как вы на самом деле не решаете актуальную проблему здесь. вместо этого вы создаете новый, расстраивая пользователей, потому что им приходится вручную вводить свои (предположительно) данные для входа (если они даже помнят, кем они были)
xorinzor
25
Если вы хотите сохранить автозаполнение, а также любые данные, прикрепленные обработчики и функции, связанные с вашими элементами ввода, попробуйте этот скрипт:
Он опрашивает, пока не найдет какие-либо элементы автозаполнения, клонирует их, включая данные и события, затем вставляет их в DOM в том же месте и удаляет оригинал. Он останавливает опрос, когда находит клонирование, так как автозаполнение иногда занимает секунду после загрузки страницы. Это вариант предыдущего примера кода, но он более устойчив и сохраняет как можно больше функциональных возможностей.
Это было единственное решение, которое я нашел работающим, БЕЗ отключения автозаполнения.
Ксероксоид
может быть установка интервалов не нужна, так как автозаполнение chrome на window.load?
Тимо Хуовинен
2
Работает без удаления автозаполнения, гораздо лучшее решение, чем те, которые имеют миллионы голосов.
Союзник
Другие решения не сработали для меня, даже самые решительные, но это сработало. Проблема, которая противоположна тому, что @Timo сказал выше, заключается в том, что Chrome не выполняет автозаполнение прямо в window.load. Несмотря на то, что это сработало, одна проблема заключается в том, что если нет элементов -webkit-autofill, цикл непрерывно выполняется. Вам даже не нужен интервал, чтобы это работало. Просто установите время ожидания с задержкой в 50 миллисекунд, и оно будет работать нормально.
Гэвин
16
Следующий CSS удаляет желтый цвет фона и заменяет его на цвет фона по вашему выбору. Он не отключает автозаполнение и не требует взлома jQuery или Javascript.
input:-webkit-autofill {-webkit-box-shadow:00050px 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*/,00050px white inset;-webkit-text-fill-color:#333;}
Не используйте этот скрипт. Если нет автозаполненных элементов, цикл будет непрерывно работать в течение 20 миллисекунд. Интервал не нужен. Установите тайм-аут после window.load примерно на 50 миллисекунд, и у вас будет достаточно времени для удаления стиля.
Гэвин
2
Это устраняет проблему как в Safari, так и в Chrome
input:-webkit-autofill {-webkit-box-shadow:000px1000px white inset !important;}
input:focus:-webkit-autofill {-webkit-box-shadow:000px1000px white inset !important;}/* You can use color:#color to change the color */
В своем теге просто вставьте эту небольшую строку кода.
autocomplete="off"
Однако не помещайте это в поле username / email / idname, потому что, если вы все еще хотите использовать автозаполнение, оно отключит его для этого поля. Но я нашел способ обойти это, просто поместив код в тэг ввода пароля, потому что вы никогда не будете автоматически заполнять пароли. Это исправление должно убрать силу цвета, возможность автозаполнения matinain в вашем поле электронной почты / имени пользователя и позволяет избежать громоздких хаков, таких как Jquery или javascript.
Он отключает автозаполнение и автозаполнение (таким образом, желтый фон исчезает), ждет 100 миллисекунд и затем возвращается к функции автозаполнения без автозаполнения.
Если у вас есть входные данные, которые необходимо заполнить автоматически, присвойте им auto-complete-onкласс css.
Ни одно из решений не помогло мне, ввод имени пользователя и пароля все еще заполнялся и отображался на желтом фоне.
Поэтому я спросил себя: «Как Chrome определяет, что нужно заполнить на данной странице?»
"Он ищет входные идентификаторы, входные имена? Идентификаторы форм? Действие форм?"
Благодаря моим экспериментам с вводом имени пользователя и пароля, я обнаружил только два способа, которые привели бы к тому, что Chrome не смог найти поля, которые должны быть заполнены автоматически:
1) Поместите ввод пароля перед вводом текста. 2) Дайте им то же имя и идентификатор ... или нет имени и идентификатора.
После загрузки страницы с помощью javascript вы можете либо изменить порядок входов на странице, либо динамически присвоить им их имя и идентификатор ...
И Chrome не знает, что попало в него ... автозаполнение остается выключенным.
Сумасшедший хак, я знаю. Но это работает для меня.
Не работает в Chrome. Как только поле становится type = password, Chrome заполняет его
mowgli
0
Обновление решения Arjans. При попытке изменить значения он не позволит вам. Это прекрасно работает для меня. Когда вы сосредоточитесь на входе, он станет желтым. его достаточно близко.
платный намрути ответ правильный. Но фон все еще становится желтым, когда выбран вход . Добавление !importantисправить проблему. Если вы хотите также textareaи selectс тем же поведением, просто добавьтеtextarea:-webkit-autofill, select:-webkit-autofill
Ответы:
Измените «белый» на любой цвет, который вы хотите.
источник
-webkit-text-fill-color
- смотрите этот вопросbox-shadow: inset 0 0 0 1000px white !important;
Если вам нужны прозрачные поля ввода, вы можете использовать переход и задержку перехода.
источник
-webkit-box-shadow
. Также устраняется необходимость указывать значения цвета для этого объявления: значения по умолчанию все равно будут применяться.Решение здесь :
источник
В Firefox вы можете отключить все автозаполнения в форме с помощью атрибута autocomplete = "off / on". Аналогично, для автозаполнения отдельных элементов можно задать один и тот же атрибут.
Вы можете проверить это в Chrome, как это должно работать.
источник
autocomplete="off"
не доступен в эти дни.Если вы хотите сохранить автозаполнение, а также любые данные, прикрепленные обработчики и функции, связанные с вашими элементами ввода, попробуйте этот скрипт:
Он опрашивает, пока не найдет какие-либо элементы автозаполнения, клонирует их, включая данные и события, затем вставляет их в DOM в том же месте и удаляет оригинал. Он останавливает опрос, когда находит клонирование, так как автозаполнение иногда занимает секунду после загрузки страницы. Это вариант предыдущего примера кода, но он более устойчив и сохраняет как можно больше функциональных возможностей.
(Подтверждено работа в Chrome, Firefox и IE 8.)
источник
Следующий CSS удаляет желтый цвет фона и заменяет его на цвет фона по вашему выбору. Он не отключает автозаполнение и не требует взлома jQuery или Javascript.
Решение, скопированное из: Отменить заполнение формы браузера и подсветку ввода с помощью HTML / CSS
источник
Работал для меня, только изменение css требуется.
Вы можете поставить любой цвет вместо #ffffff .
источник
Немного хакерский, но у меня отлично работает
источник
Комбинация ответов работала для меня
источник
Вот MooTools версия Джейсона. Исправляет это и в Safari.
источник
Это устраняет проблему как в Safari, так и в Chrome
источник
Это помогло мне, версия только для CSS.
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
где белый может быть любого цвета, который вы хотите.
источник
Я использую это,
источник
В своем теге просто вставьте эту небольшую строку кода.
Однако не помещайте это в поле username / email / idname, потому что, если вы все еще хотите использовать автозаполнение, оно отключит его для этого поля. Но я нашел способ обойти это, просто поместив код в тэг ввода пароля, потому что вы никогда не будете автоматически заполнять пароли. Это исправление должно убрать силу цвета, возможность автозаполнения matinain в вашем поле электронной почты / имени пользователя и позволяет избежать громоздких хаков, таких как Jquery или javascript.
источник
Если вы хотите полностью избавиться от него, я изменил код в предыдущих ответах, чтобы он работал на hover, active и focus:
источник
!important
необходимо, но спасибо, это мне очень помогло.Вот решение Mootools, которое делает то же самое, что и решение Алессандро, - заменяет каждый задействованный ввод новым.
источник
Как насчет этого решения:
Он отключает автозаполнение и автозаполнение (таким образом, желтый фон исчезает), ждет 100 миллисекунд и затем возвращается к функции автозаполнения без автозаполнения.
Если у вас есть входные данные, которые необходимо заполнить автоматически, присвойте им
auto-complete-on
класс css.источник
Ни одно из решений не помогло мне, ввод имени пользователя и пароля все еще заполнялся и отображался на желтом фоне.
Поэтому я спросил себя: «Как Chrome определяет, что нужно заполнить на данной странице?»
"Он ищет входные идентификаторы, входные имена? Идентификаторы форм? Действие форм?"
Благодаря моим экспериментам с вводом имени пользователя и пароля, я обнаружил только два способа, которые привели бы к тому, что Chrome не смог найти поля, которые должны быть заполнены автоматически:
1) Поместите ввод пароля перед вводом текста. 2) Дайте им то же имя и идентификатор ... или нет имени и идентификатора.
После загрузки страницы с помощью javascript вы можете либо изменить порядок входов на странице, либо динамически присвоить им их имя и идентификатор ...
И Chrome не знает, что попало в него ... автозаполнение остается выключенным.
Сумасшедший хак, я знаю. Но это работает для меня.
Chrome 34.0.1847.116, OSX 10.7.5
источник
Единственный способ, который работает для меня, был: (требуется jQuery)
источник
Я исправил эту проблему для поля пароля, которое у меня есть вот так:
Установите тип ввода текста вместо пароля
Удалите введенное текстовое значение с помощью jQuery
Преобразуйте тип ввода в пароль с помощью jQuery
источник
Обновление решения Arjans. При попытке изменить значения он не позволит вам. Это прекрасно работает для меня. Когда вы сосредоточитесь на входе, он станет желтым. его достаточно близко.
источник
Попробуйте этот код:
источник
платный намрути ответ правильный. Но фон все еще становится желтым, когда выбран вход . Добавление
!important
исправить проблему. Если вы хотите такжеtextarea
иselect
с тем же поведением, просто добавьтеtextarea:-webkit-autofill, select:-webkit-autofill
Только вход
введите, выберите, текстовое поле
источник
Добавление
autocomplete="off"
не собирается сокращать это.Измените атрибут типа ввода на
type="search"
.Google не применяет автозаполнение для входов с типом поиска.
Надеюсь, это сэкономит вам время.
источник
Если вы хотите избежать желтого мерцания, пока ваша CSS не будет применена, шлепните переход на этого плохого парня так:
источник
Окончательное решение:
источник
Подобный вопрос: ссылка
источник
Просто оказался с таким же вопросом. Это работает для меня:
источник