Как сделать так, чтобы Chrome не пожелтел в полях ввода на моем сайте?

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

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

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

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

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

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

<form autocomplete = "off" ...>

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

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

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

:focus { background-color: #fff; }

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

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

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

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

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

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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

С jQuery это проще простого:

if ($.browser.webkit) {
    $("input").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 не работает с rgba). Это небольшая настройка ответа @Benjamin. Я использую $ (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);
        });
    });
};

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

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

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

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