Как остановить Chrome от пожелтения полей ввода моего сайта?

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

В Chrome (и для пользователей панели инструментов Google) функция автозаполнения меняет цвета моих форм ввода на желтый. Вот сложная проблема: я хочу, чтобы автозаполнение разрешалось в моих формах, так как оно ускоряет вход в систему пользователей. Я собираюсь проверить возможность отключить атрибут автозаполнения, если / когда произошла ошибка, но это сложный бит кодирования, чтобы программно отключить автозаполнение для одного затронутого входа на странице. Это, если быть проще, было бы главной головной болью.

Поэтому, чтобы попытаться избежать этой проблемы, существует ли более простой способ остановить Chrome от повторной раскраски полей ввода?

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

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

Я знаю, что в Firefox вы можете использовать атрибут autocomplete = “off”, чтобы отключить функциональность автозаполнения. Если это работает в Chrome (не протестировано), вы можете установить этот атрибут при возникновении ошибки.

Это может использоваться как для одного элемента

 

… а также для всей формы

 

Установите для свойства схемы CSS значение none.

 input[type="text"], input[type="password"], textarea, select { outline: none; } 

В случаях, когда браузер может добавить цвет фона, это может быть исправлено чем-то вроде

 :focus { background-color: #fff; } 

это именно то, что вы ищете!

 // Just change "red" to any color input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px red inset; } 

Используя немного 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); }); });} 

Чтобы удалить границу для всех полей, вы можете использовать следующее:

*:focus { outline:none; }

Чтобы удалить границу для полей выбора, просто примените этот class к полям ввода, которые вы хотите:

.nohighlight:focus { outline:none; }

Конечно, вы можете изменить границу, как вам хочется:

.changeborder:focus { outline:Blue Solid 4px; }

(От Билла Бекельмана: Переопределить автоматическую границу Chrome вокруг активных полей с помощью CSS )

Да, это будет серьезная головная боль, которая, на мой взгляд, не стоит возвращения. Возможно, вы немного изменили свою страtagsю пользовательского интерфейса, и вместо того, чтобы раскрасить красную рамку, вы можете покрасить границы красным цветом или поместить небольшую волокиту рядом с ней (например, ленту «Загрузка»), которая исчезает, когда поле находится в фокус.

Это кусок пирога с jQuery:

 if ($.browser.webkit) { $("input").attr('autocomplete','off'); } . if ($.browser.webkit) { $("input").attr('autocomplete','off'); } 

Или, если вы хотите быть немного более избирательным, добавьте имя classа для селектора.

На мой взгляд, проще:

  1. Получить http://www.quirksmode.org/js/detect.html
  2. Используйте этот код:

     if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); }; . if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); }; 

После применения @Benjamin его решения я узнал, что нажатие кнопки «Назад» все равно даст мне желтую подсветку.

Мое решение каким-то образом предотвратить появление этой желтой подсветки – это применить следующий jQuery jQuery:

  

Надеюсь, это поможет любому!

Это работает. Лучше всего, вы можете использовать значения rgba (с помощью rgba не работает ручка вставки в рамке-тени). Это небольшая подсказка от ответа Бенджамина. Я использую $ (document) .ready () вместо $ (window) .load (). Мне кажется, что мне лучше работать – сейчас гораздо меньше FOUC. Я не верю, что есть и недостатки использования $ (document) .ready ().

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(document).ready(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); }); }); }; 

для сегодняшних версий, это тоже работает, если помещено в один из двух входных логинов. Также исправьте версию 40+ и позднюю версию Firefox.

  
 input:focus { outline:none; } 

Это отлично подойдет для меня, но, скорее всего, сохранит на вашем сайте единое целое, и вы захотите также включить его в свой CSS для текстовых областей:

 textarea:focus { outline:none; } 

Также это может показаться очевидным для большинства, но для новичков вы также можете установить цвет как таковой:

 input:focus { outline:#HEXCOD SOLID 2px ; } 

Если я правильно помню, важное правило в таблице стилей для цвета фона входов будет переопределять автозаполнение панели инструментов Google – по-видимому, то же самое относится и к Chrome.

  • Проверка Xml с использованием схемы XSD
  • Использование правил проверки WPF и отключение кнопки «Сохранить»
  • Проверка нокаута
  • Проверка адреса электронной почты в Android на EditText
  • Получение приглашения для входа с помощью встроенной проверки подлинности Windows
  • Разрешить пользователю вводить HTML в ASP.NET MVC - ValidateInput или AllowHtml
  • Проверьте, имеет ли браузер встроенную проверку HTML5?
  • Бесконечная петля с cin при наборе строки, в то время как число ожидается
  • загрузка jquery дважды вызывает ошибку?
  • Проверка подлинности WinForm UI
  • Какой алгоритм дает предложения в проверке орфографии?
  • Давайте будем гением компьютера.