В форме, над которой я работаю, Chrome автоматически заполняет поля электронной почты и пароля. Это прекрасно, однако Chrome меняет цвет фона на бледно-желтый цвет.
Дизайн, над которым я работаю, использует легкий текст на темном фоне, так что это действительно испортило внешний вид формы - у меня есть ясные желтые ящики и почти невидимый белый текст. Когда поле сфокусировано, поля возвращаются в нормальное состояние.
Можно ли остановить Chrome, изменив цвет этих полей?
Это отлично работает, вы можете изменить стили ввода, а также стили текста внутри поля ввода:
Здесь вы можете использовать любой цвет, например 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 будет его полностью перекрывать.
Предыдущие решения по добавлению рамки-тени хорошо работают для людей, которым нужен однотонный фон. Другое решение добавления перехода работает, но необходимость установить длительность/задержку будет означать, что в какой-то момент он может появиться снова.
Мое решение состоит в том, чтобы вместо этого использовать ключевые кадры, чтобы они всегда отображали цвета по вашему выбору.
@-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
У меня есть лучшее решение.
Установка фона на другой цвет, как показано ниже, не решила проблему для меня, потому что мне понадобилось прозрачное поле ввода
-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;
}
Это мое решение, я использовал переходную и переходную задержку, поэтому я могу иметь прозрачный фон в своих полях ввода.
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;
}
Это было разработано, так как это поведение окраски было из WebKit. Это позволяет пользователю понять, что данные были предварительно заполнены. Ошибка 1334
Вы можете отключить автозаполнение, выполнив (или на конкретном элементе управления формой:
<form autocomplete="off">
...
</form
Или вы можете изменить цвет автозаполнения, выполнив:
input:-webkit-autofill {
color: #2a2a2a !important;
}
Обратите внимание, что для этого снова отслеживается ошибка: http://code.google.com/p/chromium/issues/detail?id=46543
Это поведение WebKit.
Возможным обходным путем на данный момент является установка "сильной" внутренней тени:
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;
}
попробуйте это для скрытия стиля автозаполнения
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;
}
Все вышеперечисленные ответы работали, но имели свои недостатки. Нижеприведенный код представляет собой объединение двух из вышеперечисленных ответов, которые работают безупречно, не мигая.
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;
}
SASS
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color
Через 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;
}
это полностью удалит желтый из полей ввода
В дополнение к этому:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Вы также можете добавить
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
Другое, когда вы нажимаете на ввод, желтый цвет возвращается. Для фокуса, если вы используете бутстрап, вторая часть предназначена для выделения границы 0 0 8px rgba (82, 168, 236, 0,6);
Таким образом, он будет выглядеть как любой загрузочный ввод.
Если вы хотите сохранить функциональность автозаполнения, вы можете использовать немного jQuery для удаления стиля Chrome. Я написал короткую статью об этом здесь: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
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);
});
});}
У меня была проблема, когда я не мог использовать box-shadow, потому что мне нужно, чтобы поле ввода было прозрачным. Это немного взломанный, но чистый CSS. Установите переход на очень длительное время.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
Попробуйте следующее: То же, что @Nathan-white ответить выше с небольшими изменениями.
/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
}
Я разработал другое решение с использованием JavaScript без JQuery. Если вы сочтете это полезным или решите повторно отправить мое решение, я просто прошу включить мое имя. Наслаждаться. - Дэниел Фэйрвезер
var documentForms = document.forms;
for(i = 0; i < documentForms.length; i++){
for(j = 0; j < documentForms[i].elements.length; j++){
var input = documentForms[i].elements[j];
if(input.type == "text" || input.type == "password" || input.type == null){
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
Этот код основан на том, что Google Chrome удаляет стиль Webkit сразу после ввода дополнительного текста. Простое изменение значения поля ввода недостаточно, Chrome хочет событие. Сосредоточив внимание на каждом поле ввода (текст, пароль), мы можем отправить событие клавиатуры (буква "a" ), а затем установить для него текстовое значение предыдущего состояния (текст с автозаполнением). Имейте в виду, что этот код будет работать в каждом браузере и будет проверять каждое поле ввода на веб-странице, отрегулировать его в соответствии с вашими потребностями.
Добавление задержки на один час приостановит любые изменения CSS на элементе input.
Это лучше, чем добавлять анимацию перехода или внутреннюю тень.
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
transition-delay: 3600s;
}
Для тех, кто использует Compass:
@each $prefix in -webkit, -moz {
@include with-prefix($prefix) {
@each $element in input, textarea, select {
#{$element}:#{$prefix}-autofill {
@include single-box-shadow(0, 0, 0, 1000px, $white, inset);
}
}
}
}
У меня есть чистое решение CSS, которое использует фильтры CSS.
filter: grayscale(100%) brightness(110%);
Фильтр оттенков серого заменяет желтый на серый, затем яркость удаляет серый.
Я сдаюсь!
Поскольку нет способа изменить цвет ввода с помощью автозаполнения, я решил отключить их все с помощью jQuery для браузеров webkit. Вот так:
if (/webkit/.test(navigator.userAgent.toLowerCase())) {
$('[autocomplete="on"]').each(function() {
$(this).attr('autocomplete', 'off');
});
}
Решение Daniel Fairweather (Удаление цвета фона ввода для автозаполнения Chrome?) (я бы хотел, чтобы его решение было отменено, но все еще нужно 15 rep) работает действительно хорошо, Существует огромная разница с большинством сторонних решений: вы можете сохранить фоновые изображения! Но небольшая модификация (только проверка Chrome)
И вам нужно иметь в виду, он ТОЛЬКО работает над видимыми полями!
Итак, если вы используете $.show() для своей формы, вам нужно запустить этот код. После show() event
Мое полное решение (у меня есть кнопки show/hide для формы входа):
if (!self.isLoginVisible()) {
var container = $("#loginpage");
container.stop();
self.isLoginVisible(true);
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var documentForms = document.forms;
for (i = 0; i < documentForms.length; i++) {
for (j = 0; j < documentForms[i].elements.length; j++) {
var input = documentForms[i].elements[j];
if (input.type == "text" || input.type == "password" || input.type == null) {
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
}
} else {
self.hideLogon();
}
Извините, я бы предпочел, чтобы это был комментарий.
Если вы хотите, я могу поместить ссылку на сайт, где я его использовал.
У меня есть решение, если вы хотите предотвратить автозаполнение от google chrome, но его немного "мачете", просто удалите класс, который Chrome Chrome добавляет к этим полям ввода и устанавливает значение "", если вы не необходимо показать данные хранилища после загрузки.
$(document).ready(function () {
setTimeout(function () {
var data = $("input:-webkit-autofill");
data.each(function (i,obj) {
$(obj).removeClass("input:-webkit-autofill");
obj.value = "";
});
},1);
});
Это будет работать для ввода, текстовой области и выбора в нормальном, наведении, фокусе и активном состоянии.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
Вот версия SCSS вышеупомянутого решения для тех, кто работает с SASS/SCSS.
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
&, &:hover, &:focus, &:active
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}
Спасибо, Бенджамин!
Решение Mootools немного сложнее, так как я не могу получить поля с помощью $('input:-webkit-autofill'), поэтому я использовал следующее:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
window.addEvent('load', function() {
setTimeout(clearWebkitBg, 20);
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
$(elems[i]).addEvent('blur', clearWebkitBg);
}
});
}
function clearWebkitBg () {
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
var oldInput = $(elems[i]);
var newInput = new Element('input', {
'name': oldInput.get('name'),
'id': oldInput.get('id'),
'type': oldInput.get('type'),
'class': oldInput.get('class'),
'value': oldInput.get('value')
});
var container = oldInput.getParent();
oldInput.destroy();
container.adopt(newInput);
}
}
function getElems() {
return ['pass', 'login']; // ids
}
Ни один из решений не работал у меня, тень вставки не будет работать для меня, потому что входы имеют полупрозрачный фон, наложенный на фон страницы.
Итак, я спросил себя: "Как Chrome определяет, что должно быть автозаполнено на данной странице?"
"Он ищет идентификаторы ввода, имена ввода? Идентификаторы формы? Действие формы?"
Благодаря моим экспериментам с именами пользователей и вводами пароля было обнаружено только два способа: Chrome не сможет найти поля, которые необходимо авторизовать:
1) Поместите ввод пароля перед текстовым вводом. 2) Дайте им одно и то же имя и идентификатор... или нет имени и идентификатора вообще.
После загрузки страницы с помощью javascript вы можете либо динамически изменять порядок входов на странице, либо динамически давать им свое имя и идентификатор...
И Chrome не знает, что попало... autocomplete сломан!
Сумасшедший хак, я знаю. Но он работает для меня.
Chrome 34.0.1847.116, OSX 10.7.5
К сожалению, ни одно из вышеперечисленных решений не работало для меня в 2016 году (через пару лет после вопроса)
Итак, вот агрессивное решение, которое я использую:
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
В принципе, он удаляет тег при сохранении значения и воссоздает его, а затем возвращает значение.
У этого парня есть отличное решение с использованием JS и отлично работает.
Как упоминалось ранее, вставка -webkit-box-shadow для меня работает лучше всего.
/* Code witch overwrites input background-color */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}
Также фрагмент кода для изменения цвета текста:
input:-webkit-autofill:first-line {
color: #797979;
}
Я знаю, что OP хотел изменить только поле ввода, но использовать это для того, чтобы установить автозаполнение поверх всех общих типов полей.
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes autofill {
to {
color: #000;
background: transparent;
}
}
Это сработало для меня:
padding: 5px;
background-clip: content-box;
Это работает для меня.
.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}