переопределить заполнение формы браузера и подсветку ввода с помощью html/css

<p>у меня есть 2 основных формы - войти и зарегистрироваться, обе на одной странице. теперь у меня нет проблем с автозаполнением формы входа, <del>но форма автозаполнения также заполняется, и мне это не нравится.</del></p><p>кроме того, стили форм получают желтый фон, который мне не удается переопределить, и я не хочу использовать встроенный css для этого. что я могу сделать, чтобы они перестали быть желтыми <del>и (возможно) автозаполнение</del>? заранее спасибо!</p>

<p>обманите его «сильной» внутренней тенью:</p><pre><code>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; } </code></pre>

<p>добавьте это правило css, и желтый цвет фона исчезнет. :)</p><pre><code>input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } </code></pre>

<pre><code><form autocomplete="off"> </code></pre><p>почти все современные браузеры будут уважать это.</p>

<p>после 2 часов поиска кажется, что google chrome все-таки переопределяет желтый цвет, но я нашел исправление это будет работать для парения, фокусировки и т.д. все, что вам нужно сделать, это добавить <code>!important</code> к нему.</p><pre><code>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; } </code></pre><p>это полностью удалит желтый цвет из полей ввода</p>

<p>вы также можете изменить атрибут name ваших элементов формы, чтобы он создавался так, чтобы браузер не отслеживал его. однако firefox 2.x + и google chrome, похоже, не имеют особых проблем с этим, если url-адрес запроса идентичен. попробуйте в основном добавить параметр запроса соли и имя поля соли для формы регистрации.</p><p>однако я думаю, что autocomplete = "off" по-прежнему является лучшим решением :)</p>

<p>иногда автозаполнение в браузере все еще выполняется автоматически, когда у вас есть только код в элементе <code><form></code>.</p><p>я также попытался поместить его в элемент <code><input></code>, и он работал лучше.</p><pre><code><form autocomplete="off"> and <input autocomplete="off"> </code></pre><p>однако поддержка этого атрибута прекращается, прочитайте <a href="https://bugzilla.mozilla.org/show\_bug.cgi?id=956906#c1">https://bugzilla.mozilla.org/show\_bug.cgi?id=956906#c1</a> </p><p> <a href="https://bugzilla.mozilla.org/show\_bug.cgi?id=956906">https://bugzilla.mozilla.org/show\_bug.cgi?id=956906</a> </p><hr><p>еще одна работа, которую я нашел, - это удаление заполнителей внутри полей ввода, которые предполагают, что это поле электронной почты, имени пользователя или телефона (т. е. «ваша электронная почта», «электронная почта» и т.д.)</p><p><img src="https://i.stack.imgur.com/3we5u.png" alt="enter image description here"></p><p>это позволяет браузерам не знать, что это за поле, поэтому не пытается его заполнить автоматически.</p>

<p>вы можете отключить автозаполнение с html5 (через <code>autocomplete="off"</code>), но вы не можете переопределить подсветку браузера. вы можете попробовать поиграться с <code>::selection</code> в css (большинству браузеров для этого нужен префикс поставщика), но это, вероятно, вам тоже не поможет.</p><p>если поставщик браузера специально не реализует специфический для поставщика способ переопределения, вы не можете ничего сделать с такими стилями, которые уже предназначены для переопределения таблицы стилей сайта для пользователя. они обычно применяются после применения ваших таблиц стилей и игнорируют также переопределения <code>! important</code>.</p>

<p>это устраняет проблему как в safari, так и в chrome</p><pre><code>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); } 

так как браузер ищет поля типа пароля, другой обходной путь должен включать скрытое поле в начале вашей формы:<!-- unused field to stop browsers from overriding form style --> <input type='password' style = 'display:none' /> 

отключение автозаполнения не поддерживается современными браузерами. самым простым способом решения автозаполнения, который я нашел, был небольшой трек с 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'); } </code></pre><p>вот и все! </p><p><strong> upd: эта штука не работает с отключенным javasciprt </strong></p><p><strong> upd в 2018 году. также нашел какой-то забавный трюк. установите атрибут readonly в поле ввода и удалите его в событии focus. во-первых, запретить браузеру автозаполнение полей, во-вторых, позволит вводить данные. </strong></p>

<p>попробовав много вещей, я нашел работающие решения, которые очищали автоматически заполненные поля и заменяли их дублированными. чтобы не терять прикрепленные события, я придумал другое (немного длинное) решение.</p><p>при каждом событии «ввода» он быстро присоединяет события «изменения» ко всем задействованным входам. он проверяет, были ли они заполнены автоматически. если да, отправьте новое текстовое событие, которое заставит браузер думать, что значение было изменено пользователем, что позволяет удалить желтый фон.</p><pre><code>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); } }); </code></pre>

<p>на скриншоте, на который вы ссылаетесь, сказано, что webkit использует селектор <code>input:-webkit-autofill</code> для этих элементов. вы пытались вставить это в свой css?</p><pre><code>input:-webkit-autofill { background-color: white !important; } </code></pre><p>если это не сработает, то, вероятно, ничего не получится. эти поля подсвечиваются, чтобы предупредить пользователя о том, что они были автоматически заполнены личной информацией (такой как домашний адрес пользователя), и можно утверждать, что разрешение страницы скрыться, что создает угрозу безопасности.</p>

<p>элемент <code>form</code> имеет атрибут <code>autocomplete</code>, который можно установить равным <code>off</code>. что касается css, директива <code>!important</code> после свойства предотвращает его переопределение:</p><pre><code>background-color: white !important; </code></pre><p>только ie6 не понимает этого.</p><p>если я вас неправильно понял, есть также свойство <code>outline</code>, которое вы можете найти полезным.</p>

<p>я прочитал так много веток и попробовал так много кусочков кода .... после сбора всего этого, единственный способ, которым я нашел, чтобы очистить поля логина и пароля и сбросить их фон к белому, был следующим:</p><pre><code>$(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); }); </code></pre><p>не стесняйтесь комментировать, я открыт для всех улучшений, если вы найдете некоторые.</p>