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

Question

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

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

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

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

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

Answer 1

Установить свойство контура CSS равным none.

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

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

:focus { background-color: #fff; }

Answer 2

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

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

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

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

<form autocomplete="off" ...>

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

Answer 5

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

*:focus { outline:none; }

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

.nohighlight:focus { outline:none; }

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

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

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

Мое решение как-то , чтобы предотвратить возвращение этого желтого выделения, заключается в применении следующего 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

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

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

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