У меня проблема с дизайном Google Chrome и его функцией автозаполнения форм. Если Chrome запоминает логин / пароль, он меняет цвет фона на желтый.
Вот несколько скриншотов:
Как удалить этот фон или просто отключить автозаполнение?
У меня проблема с дизайном Google Chrome и его функцией автозаполнения форм. Если Chrome запоминает логин / пароль, он меняет цвет фона на желтый.
Вот несколько скриншотов:
Как удалить этот фон или просто отключить автозаполнение?
Измените «белый» на любой желаемый цвет.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
-webkit-text-fill-color
- см. этот вопрос
- person Erwin Wessels; 08.07.2014
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 0 50px white;
- person ; 19.08.2014
-webkit-box-shadow: inset 0 100px 0 white;
- person Ali Gonabadi; 28.08.2014
box-shadow: inset 0 0 0 1000px white !important;
- person Muhammad Umer; 01.04.2016
Если вам нужны прозрачные поля ввода, вы можете использовать переход и задержку перехода.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
-webkit-box-shadow
. Также устраняется необходимость указывать значения цвета для этого объявления: значения по умолчанию по-прежнему будут применяться.
- person Sébastien; 13.10.2016
Решение здесь:
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);
});
});
}
В Firefox вы можете отключить все автозаполнение в форме с помощью атрибута autocomplete = "off / on". Аналогичным образом автозаполнение отдельных элементов может быть установлено с использованием одного и того же атрибута.
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
Вы можете проверить это в Chrome, так как он должен работать.
autocomplete="off"
недоступен.
- person João; 04.04.2012
Если вы хотите сохранить автозаполнение, а также любые данные, прикрепленные обработчики и функции, прикрепленные к вашим элементам ввода, попробуйте этот сценарий:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}
Он опрашивает, пока не найдет какие-либо элементы автозаполнения, клонирует их, включая данные и события, затем вставляет их в DOM в том же месте и удаляет оригинал. Он прекращает опрос, как только находит, что нужно клонировать, поскольку автозаполнение иногда занимает секунду после загрузки страницы. Это вариант предыдущего примера кода, но более надежный и сохраняет максимально возможную функциональность.
(Подтверждена работа в Chrome, Firefox и IE 8.)
Следующий CSS удаляет желтый цвет фона и заменяет его цветом фона по вашему выбору. Он не отключает автозаполнение и не требует взлома jQuery или Javascript.
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;
}
Решение скопировано из: Переопределить заполнение формы браузера и выделение ввода с HTML / CSS
Сработало для меня, требуется только изменение css.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
вместо #ffffff можно указать любой цвет.
Немного хакерский, но отлично работает для меня
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Комбинация ответов сработала для меня
<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
-webkit-text-fill-color: white !important;
}
</style>
Вот версия Джейсона для MooTools. Исправляет это и в Safari.
window.addEvent('domready',function() {
$('username').focus();
if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
{
var _interval = window.setInterval(function ()
{
var autofills = $$('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function(el)
{
var clone = el.clone(true,true).inject(el,'after');;
el.dispose();
});
}
}, 20);
}
});
Это устраняет проблему как в Safari, так и в Chrome.
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}
Это помогло мне, версия только CSS.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
где белый может быть любого цвета.
Я использую это,
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
Просто вставьте в свой тег эту небольшую строчку кода.
autocomplete="off"
Однако не помещайте это в поле имени пользователя / электронной почты / идентификатора, потому что, если вы все еще хотите использовать автозаполнение, оно отключит его для этого поля. Но я нашел способ обойти это, просто поместите код в тег ввода пароля, потому что вы никогда не заполняете пароли автоматически. Это исправление должно убрать силу цвета, возможность автозаполнения matinain в вашем поле электронной почты / имени пользователя и позволит вам избежать громоздких взломов, таких как Jquery или javascript.
Если вы хотите полностью избавиться от него, я скорректировал код в предыдущих ответах, чтобы он также работал при наведении, активном и фокусировке:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
!important
необходимо, но спасибо, это мне очень помогло.
- person Polochon; 10.03.2015
Вот решение Mootools, которое делает то же самое, что и Алессандро - заменяет каждый затронутый ввод новым.
if (Browser.chrome) {
$$('input:-webkit-autofill').each(function(item) {
var text = item.value;
var name = item.get('name');
var newEl = new Element('input');
newEl.set('name', name);
newEl.value = text;
newEl.replaces(item);
});
}
Что насчет этого решения:
if ($.browser.webkit) {
$(function() {
var inputs = $('input:not(.auto-complete-on)');
inputs.attr('autocomplete', 'off');
setTimeout(function() {
inputs.attr('autocomplete', 'on');
}, 100);
});
}
Он отключает автозаполнение и автозаполнение (поэтому желтый фон исчезает), ждет 100 миллисекунд, а затем снова включает функцию автозаполнения без автозаполнения.
Если у вас есть поля ввода, которые нужно заполнить автоматически, дайте им auto-complete-on
класс css.
Ни одно из решений не сработало для меня, поля ввода имени пользователя и пароля все еще были заполнены и имели желтый фон.
Поэтому я спросил себя: «Как Chrome определяет, что должно быть автоматически заполнено на данной странице?»
«Ищет ли он идентификаторы ввода, имена ввода? Идентификаторы формы? Действия формы?»
Экспериментируя с вводом имени пользователя и пароля, я обнаружил только два способа, из-за которых Chrome не сможет найти поля, которые должны быть заполнены автоматически:
1) Поместите ввод пароля перед вводом текста. 2) Дайте им то же имя и идентификатор ... или без имени и идентификатора.
После загрузки страницы с помощью javascript вы можете либо изменить порядок входных данных на странице, либо динамически дать им их имя и идентификатор ...
И Chrome не знает, что его ударило ... автозаполнение отключено.
Я знаю, что это сумасшедший хак. Но у меня это работает.
Chrome 34.0.1847.116, OSX 10.7.5
Единственный способ, который сработал для меня, был: (требуется jQuery)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
Я исправил эту проблему для поля пароля, которое у меня было следующим образом:
Установите тип ввода текст вместо пароля
Удалите введенное текстовое значение с помощью jQuery
Преобразуйте тип ввода в пароль с помощью jQuery
<input type="text" class="remove-autofill">
$('.js-remove-autofill').val('');
$('.js-remove-autofill').attr('type', 'password');
Обновление решения Arjans. При попытке изменить значения это не позволит вам. У меня это отлично работает. Когда вы фокусируетесь на вводе, он становится желтым. это достаточно близко.
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
var id = window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
}
});
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
Попробуйте этот код:
$(function(){
setTimeout(function(){
$('[name=user_password]').attr('type', 'password');
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">
тариф намрути правильный ответ. Но фон по-прежнему становится желтым, когда выбран вход. Добавление !important
устраняет проблему. Если вы хотите также textarea
и select
с таким же поведением, просто добавьте textarea:-webkit-autofill, select:-webkit-autofill
Только ввод
input:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
ввод, выбор, текстовое поле
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
Добавление autocomplete="off"
никуда не годится.
Измените атрибут типа ввода на type="search"
.
Google не применяет автоматическое заполнение к вводам с типом поиска.
Надеюсь, это сэкономит вам время.
Если вы хотите избежать желтого мерцания, пока ваш CSS не будет применен, сделайте переход на этом плохом мальчике следующим образом:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
transition: background-color 10s ease-in-out 0s;
}
Окончательное решение:
$(document).ready(function(){
var contadorInterval = 0;
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},10);
});
}
contadorInterval++;
if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
}, 20);
}else{
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},100);
}
});
<input type="text" name="foo" autocomplete="off" />
Аналогичный вопрос: Ссылка
Просто столкнулся с тем же вопросом. Это работает для меня:
form :focus {
outline: none;
}