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

Ответ 1

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

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

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

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

<form autocomplete="off" ...>

Ответ 2

Задайте свойство схемы CSS none.

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

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

:focus { background-color: #fff; }

Ответ 3

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

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

Ответ 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);
    });
});}

Ответ 5

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

*:focus { outline:none; }

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

.nohighlight:focus { outline:none; }

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

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

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

Ответ 6

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

Ответ 7

Проще говоря, на мой взгляд:

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

<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>

Надеюсь, что это поможет любому!

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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

Ответ 14

ЛУЧШЕЕ РЕШЕНИЕ СКОРОСТЬ (МЕНЬШЕ)

input:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset;

    &:hover,
    &:focus {
        box-shadow: 0 0 0 1000px white inset;
    }
}

Ответ 15

С Mootools

function fixchromeyellow()
{
     if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
     {
      $$('input["input:-webkit-autofill"]').each(function(el)
      {
       el.clone().inject(el,"after");
       el.destroy();
      });
     }
}

window.setTimeout(fixchromeyellow, 500);