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

задайте свойству 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; }

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

.nohighlight:focus { outline:none; }

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

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

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

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

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

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

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

самый простой способ на мой взгляд:

1. Get 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 hack не работает с rgba). Это небольшая настройка ответа @Benjamin. Я использую $(document).ready () вместо $(window).нагрузка.)( Кажется, это работает лучше для меня - теперь гораздо меньше FOUC. Я не считаю, что есть и недостатки в использовании $(document).готовый.)(

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.