Переопределение заполнения формы браузера и подсветки ввода с помощью HTML / CSS

обмануть его с "сильной" внутренней тенью:

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;
}

<form autocomplete="off">

практически все современные браузеры будут уважать.

после 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;
}

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

вы также можете изменить атрибут name ваших элементов формы, чтобы быть чем-то сгенерированным, чтобы браузер не отслеживал его. Тем не менее, Firefox 2.x+ и google chrome, похоже, не имеют особых проблем с этим, если url-адрес запроса идентичен. Попробуйте в основном добавить параметр запроса соли и имя поля соли для формы регистрации.

однако я думаю, что автозаполнение= " off " по-прежнему является лучшим решением:)

иногда автозаполнение в браузере по-прежнему автозаполняется, когда у вас просто есть код в <form> элемент.

Я попытался положить его в <input> элемент, и он работал лучше.

<form autocomplete="off">  AND  <input autocomplete="off">

поддержка этого атрибута, однако, прекращается, пожалуйста, прочитайте https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

другая работа вокруг этого я обнаружил, что вынимает заполнители внутри полей ввода, которые предполагают, что это поле электронной почты, имени пользователя или телефона (т. е. "Ваша электронная почта", "Почта" и т. д.")

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

вы можете отключить автозаполнение с HTML5 (через autocomplete="off"), но вы не можете переопределить выделение браузера. Вы можете попробовать возиться с ::selection в CSS (для работы большинства браузеров требуется префикс поставщика), но это, вероятно, вам тоже не поможет.

Если поставщик браузера специально не реализовал способ переопределения для конкретного поставщика, вы ничего не можете сделать с такими стилями, которые уже предназначены для переопределения таблицы стилей сайта для пользователя. Это обычно применяется после того, как применяются таблицы стилей и игнорировать ! important переопределения.

это устраняет проблему как в 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);
}

если он находится в поле ввода, вы пытаетесь "un-yellow"...

1. установите цвет фона с помощью css... скажем, #ccc (светло-серый).
2. Add value= "sometext", который временно заполняет поле"sometext"
3. (необязательно) добавьте немного 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='';" />

скриншот, на который вы ссылаетесь, говорит, что WebKit использует селектор input:-webkit-autofill для этих элементов. Вы пробовали поместить это в свой CSS?

input:-webkit-autofill {
    background-color: white !important;
}

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

на form элемент autocomplete атрибут, который можно установить в off. По состоянию на CSS !important директива после свойства удерживает его от переопределения:

background-color: white !important;

только IE6 не понимает этого.

если я неправильно понял вас, есть также outline свойство, которое вы могли бы найти полезным.

Я видел, что функция автозаполнения панели инструментов 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>

попробовав много вещей, я нашел рабочие решения, которые уничтожили автозаполненные поля и заменили их дублированными. Чтобы не потерять прикрепленные события, я придумал другое (немного длинное) решение.

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

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);
  }
});

простое решение javascript для всех браузеров:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

клонировать вход, сбросить атрибут и скрыть исходный вход. Тайм-аут необходим для iPad

поскольку браузер ищет поля типа пароля, другим обходным путем является включение скрытого поля в начале формы:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Я прочитал так много потоков и попробовал так много фрагментов кода. Собрав все это, я нашел единственный способ очистить поля логина и пароля и сбросить их фон на белый :

$(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);
});

Не стесняйтесь комментировать, я открыт для всех улучшений, если вы найдете некоторые.

автозаполнение выключено не поддерживается современными браузерами. Самый простой способ решить автозаполнение, который я нашел, был небольшой трек с 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 в поле ввода и удалите его в событии фокуса. Первый браузер автозаполнение полей, Второй будет разрешить ввод данных.

реальная проблема здесь в том, что Webkit (Safari, Chrome,...) имеет ошибку. Когда на странице более одной [формы], каждая с [типом ввода="текст" имя="foo" ...] (т. е. с тем же значением для атрибута 'name'), то, когда пользователь вернется на страницу, автозаполнение будет сделано в поле ввода первой [формы] на странице, а не в [форме], которая была отправлена. Во второй раз следующая [форма] будет заполнена автоматически и так далее. Только [форма] с текстовым полем ввода с тем же именем будут затронуты.

об этом следует сообщить разработчикам Webkit.

Opera автоматически заполняет правую [форму].

Firefox и IE не заполняются автоматически.

Итак, я повторяю: это ошибка в Webkit.

почему бы просто не поместить это в свой css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

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

[edit] после публикации этого я увидел, что аналогичный ответ уже был дан и что вы прокомментировали это, что это не сработало. Я не совсем понимаю, почему, потому что он работал, когда я тестировал его.