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

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

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

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

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

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

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

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

<input type="text" name="name" autocomplete="off">

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

<form autocomplete="off" ...>

Установите свойство CSS outline в 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; }

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

.nohighlight:focus { outline:none; }

Вы также можете изменить границу по своему желанию:

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

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

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

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

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

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

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

1. Получить http://www.quirksmode.org/js/detect.html

2. Используйте этот код:

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

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

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

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

Надеюсь, это кому-нибудь поможет !!

Это работает. Лучше всего, вы можете использовать значения rgba (хак box-shadow inset не работает с 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 readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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

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