Переопределить заполнение формы браузера и подсветку ввода с помощью HTML/CSS
У меня есть 2 основных формы - войти и зарегистрироваться, обе на одной странице. Теперь у меня нет проблем с автозаполнением формы входа, но форма автозаполнения также заполняется, и мне это не нравится.
Кроме того, стили форм получают желтый фон, который мне не удается переопределить, и я не хочу использовать встроенный CSS для этого. Что я могу сделать, чтобы они перестали быть желтыми и (возможно) автозаполнение? Заранее спасибо!
28 ответов
Для автозаполнения вы можете использовать:
<form autocomplete="off">
в отношении проблемы окраски:
из вашего скриншота видно, что webkit генерирует следующий стиль:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) поскольку #id-стили еще более важны, чем стили.class, может работать следующее:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) если это не сработает, вы можете попытаться установить стиль с помощью javascript программно
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) если это не сработает, вы обречены:-) учтите это: это не скроет желтый цвет, но сделает текст снова читаемым.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) решение css/javascript:
CSS:
input:focus {
background-position: 0 0;
}
и следующий javascript должен быть запущен при загрузке:
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
например:
<body onload="loadPage();">
удачи:-)
5) Если ничего из вышеперечисленного не работает, попробуйте удалить элементы ввода, клонировать их, а затем поместить клонированные элементы обратно на страницу (работает в Safari 6.0.3):
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) Отсюда:
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);
});
});
}
Обманите его "сильной" внутренней тенью:
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;
}
Добавьте это правило CSS, и желтый цвет фона исчезнет.:)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Кажется, это работает для меня:
input {
-webkit-background-clip: text !important;
}
После 2 часов поиска кажется, что Google Chrome все равно как-то переопределяет желтый цвет, но я нашел исправление. Это будет работать для парения, фокусировки и т. Д. Все, что вам нужно сделать, это добавить !important к этому.
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;
}
это полностью удалит желтый цвет из полей ввода
<form autocomplete="off">
Почти все современные браузеры будут уважать это.
Иногда автозаполнение в браузере автоматически завершается, когда у вас есть только код в <form> элемент.
Я пытался положить его в <input> элемент, и он работал лучше.
<form autocomplete="off"> AND <input autocomplete="off">
Однако поддержка этого атрибута прекращается, пожалуйста, прочтите https://bugzilla.mozilla.org/show_bug.cgi?id=956906
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Еще одна работа, которую я нашел, - это удаление заполнителей внутри полей ввода, которые предполагают, что это поле электронной почты, имени пользователя или телефона (т. Е. "Ваша электронная почта", "Электронная почта" и т. Д.).
Это позволяет браузерам не знать, что это за поле, поэтому не пытается его заполнить автоматически.
Вы можете отключить автозаполнение с HTML5 (через autocomplete="off"), но вы НЕ МОЖЕТЕ переопределить подсветку браузера. Вы можете попробовать возиться с ::selection в CSS (большинству браузеров для этого нужен префикс поставщика), но это, вероятно, вам тоже не поможет.
Если поставщик браузера специально не реализовал специфический для поставщика способ его переопределения, вы не сможете ничего сделать с такими стилями, которые уже предназначены для переопределения таблицы стилей сайта для пользователя. Они обычно применяются после применения ваших таблиц стилей и игнорируют ! important тоже переопределяет.
Вы также можете изменить атрибут name ваших элементов формы, чтобы он создавался так, чтобы браузер не отслеживал его. ОДНАКО Firefox 2.x+ и Google Chrome, похоже, не имеют особых проблем с этим, если URL-адрес запроса идентичен. Попробуйте в основном добавить параметр запроса соли и имя поля соли для формы регистрации.
Однако я думаю, что autocomplete="off" по-прежнему является лучшим решением:)
Принятый ответ мог бы быть хорошим ответом для конкретных случаев, но я использовал угловой материал с прозрачным фоном, и, кроме того, поле <input> не было «полем основного материала» с причудливыми границами и т. д.
Я сделал это модифицированное решение, которое просто вызывает очень долгий переход на любой из псевдоэлементов автозаполнения, так что изменение свойств даже не заметно, если пользователю не удается оставаться на той же странице в течение значительного количества 1000000000 или столько секунд, что я установил его!
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
transition: all 10000000s;
}
Я смог удалить цвет автозаполнения с помощью этого подхода:
// Workaround to remove autofill color from inputs
input, select {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
Насколько я тестировал, это работает для Safari и Chrome на iOS и Chrome на Android.
Просто делюсь этим отличным решением от user3188724 для всех, кто хочет использовать прозрачный фон для своего ввода. Обойдите все раздражающие стили webkit по умолчанию, добавив большую задержку к переходу от стиля ввода по умолчанию к стилю webkit для автозаполнения.
Это устраняет проблему как в 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... скажем, #ccc (светло-серый).
- Add value = "sometext", который временно заполняет поле "sometext"
- (необязательно) Добавьте немного javascript, чтобы прояснить "sometext", когда вы собираетесь вставить настоящий текст.
Итак, это может выглядеть так:
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
Давайте воспользуемся небольшим взломом css:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-selected {
-webkit-text-fill-color: #000;
background: #fff !important;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}
form элемент имеет autocomplete атрибут, который вы можете установить off, Начиная с CSS !important директива после свойства удерживает его от переопределения:
background-color: white !important;
Только IE6 не понимает этого.
Если я вас неправильно понял, есть также outline свойство, которое вы могли бы найти полезным.
Так как браузер ищет поля типа пароля, другой обходной путь должен включать скрытое поле в начале вашей формы:
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
Я видел функцию автозаполнения панели инструментов Google, отключенную с помощью JavaScript. Это может работать с некоторыми другими инструментами автозаполнения; Я не знаю, поможет ли это браузерам, встроенным в автозаполнение.
<script type="text/javascript"><!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>
Отключение автозаполнения не поддерживается современными браузерами. Самым простым способом решения автозаполнения, который я нашел, был небольшой трек с HTML и JS. Первое, что нужно сделать, это изменить тип ввода в HTML с "пароль" на "текст".
<input class="input input-xxl input-watery" type="text" name="password"/>
Автозаполнение начинается после загрузки окна. Это нормально. Но когда тип вашего поля не "пароль", браузер не знал, какие поля он должен заполнить. Таким образом, в полях формы не будет автозаполнения.
После этого привязать событие focusin к полю пароля, например. в магистрали:
'focusin input[name=password]': 'onInputPasswordFocusIn',
В onInputPasswordFocusIn Просто измените тип поля на пароль, просто проверив:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
Вот и все!
UPD: эта штука не работает с отключенным JavaSciprt
UPD в 2018 году. Также нашел какой-то забавный трюк. Установите атрибут readonly в поле ввода и удалите его в событии focus. Во-первых, запретить браузеру автозаполнение полей, во-вторых, позволит ввести данные.
На скриншоте, на который вы ссылаетесь, написано, что WebKit использует селектор input:-webkit-autofill для этих элементов. Вы пытались вставить это в свой CSS?
input:-webkit-autofill {
background-color: white !important;
}
Если это не сработает, то, вероятно, ничего не получится. Эти поля подсвечиваются, чтобы предупредить пользователя о том, что они были автоматически заполнены личной информацией (например, домашним адресом пользователя), и можно утверждать, что разрешение страницы скрыться, что создает угрозу безопасности.
Я прочитал так много тем и попробовал так много кусков кода. После сбора всего этого, единственный способ, который я нашел, чтобы очистить поля логина и пароля и сбросить их фон на белый, был следующим:
$(window).load(function() {
setTimeout(function() {
$('input:-webkit-autofill')
.val('')
.css('-webkit-box-shadow', '0 0 0px 1000px white inset')
.attr('readonly', true)
.removeAttr('readonly')
;
}, 50);
});
Не стесняйтесь комментировать, я открыт для всех улучшений, если вы найдете некоторые.
Попробовав много вещей, я нашел работающие решения, которые уничтожали автоматически заполненные поля и заменяли их дублированными. Чтобы не терять прикрепленные события, я придумал другое (немного длинное) решение.
При каждом событии "вход" он быстро присоединяет события "изменения" ко всем задействованным входам. Он проверяет, были ли они заполнены автоматически. Если да, отправьте новое текстовое событие, которое заставит браузер думать, что значение было изменено пользователем, что позволяет удалить желтый фон.
var initialFocusedElement = null
, $inputs = $('input[type="text"]');
var removeAutofillStyle = function() {
if($(this).is(':-webkit-autofill')) {
var val = this.value;
// Remove change event, we won't need it until next "input" event.
$(this).off('change');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '*');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn't
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on('input', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on('change', onChange);
}
});
Мне также пришлось изменить цвет текста на более темный (см. Цвета темной темы Stackru).
В итоге получился гибрид @Tamás Pap, @MCBL и @don:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
-webkit-text-stroke-color: #e7e8eb !important;
-webkit-text-fill-color: #e7e8eb !important;
}
Вы можете стилизовать автозаполненные вводы, используя
:-webkit-autofill
Даже в firefox с префиксом webkit!
Чтобы изменить цвет фона, есть трюк с тенью блока.
А для Firefox дополнительно потребуется
filter:none.
:-webkit-autofill {
filter:none; /* needed for firefox! */
box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}
Простое решение для JavaScript для всех браузеров:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
Клонировать ввод, сбросить атрибут и скрыть исходный ввод. Тайм-аут нужен для iPad
Попробуйте указать autocomplete="none" в теге ввода
Это работает для меня
НАСТОЯЩАЯ проблема в том, что в Webkit (Safari, Chrome, ...) есть ошибка. Когда на странице имеется более одной [формы], каждая из которых имеет [input type="text" name="foo" ...] (т.е. с тем же значением для атрибута 'name'), то когда пользователь возвращает на странице автозаполнение будет выполнено в поле ввода ПЕРВОЙ [формы] на странице, а не в [форме], которая была отправлена. Во второй раз СЛЕДУЮЩАЯ [форма] будет автоматически заполнена и так далее. Будет затронуто только [форма] с полем ввода текста с тем же именем.
Об этом следует сообщить разработчикам Webkit.
Opera автоматически заполняет [форму].
Firefox и IE не заполняются автоматически.
Итак, еще раз говорю: это ошибка в Webkit.
Почему бы просто не вставить это в свой CSS:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
Это должно заботиться о вашей проблеме. Хотя это поднимает проблему юзабилити, потому что теперь пользователь не может видеть, что форма была заполнена так, как он привык.
[править] После публикации я увидел, что подобный ответ уже был дан, и что вы прокомментировали его, что он не работает. Я не совсем понимаю, почему, потому что это работало, когда я проверял это.