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

Question

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

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

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

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

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

Answer 1

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

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

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

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

<form autocomplete="off" ...>

Answer 2

Установите свойство CSS CSS равным none.

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

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

:focus { background-color: #fff; }

Answer 3

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

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

Answer 4

Используя немного jQuery, вы можете удалить стиль Chrome, сохранив при этом функциональность автозаполнения без изменений. Я написал короткий пост об этом здесь: http://www.benjaminmiles.com/2010 / 11/22 / фиксирующие-Google-chromes-желто-автозаполняемые-стили-с-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);
    });
});}

Answer 5

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

*: focus {outline: none; }

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

.nohighlight: focus {outline: none; }

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

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

<Ол>

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

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

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

Answer 9

После применения @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>

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

Answer 10

Это работает. Лучше всего, вы можете использовать значения 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);
        });
    });
};

Answer 11

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

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

Answer 12

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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

Answer 13

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