Як зупинити Chrome від пожовтіння вікон для введення мого сайту?

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

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

Тож, щоб спробувати уникнути цього питання, чи є якийсь простіший спосіб зупинити Chrome від перефарбовування вхідних полів?

[редагувати] Я спробував важливу пропозицію! нижче, і це не мало ефекту. Я ще не перевірив Панель інструментів Google, щоб перевірити, чи важливий для цього атрибут!

Наскільки я можу сказати, немає іншого способу, крім використання атрибута автозаповнення (який, здається, працює).

Я знаю, що у Firefox ви можете використовувати атрибут autocomplete = "off", щоб відключити функцію автозаповнення. Якщо це працює в Chrome (не перевірено), ви можете встановити цей атрибут, коли з’явиться помилка.

Це можна використовувати як для одного елемента

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

... а також для цілої форми

<form autocomplete="off" ...>

Встановіть властивість контуру CSS на жодну.

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

Щоб видалити рамку для вибраних полів, просто застосуйте цей клас до потрібних полів введення:

.nohighlight:focus { outline:none; }

Ви, звичайно, також можете змінювати кордон, як хочете:

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

(Від Білла Беккельмана: Перезапис автоматичної межі Chrome навколо активних полів за допомогою CSS )

Так, це був би головний головний біль, який, на мій погляд, не варто повертати. Можливо, ви могли трохи налаштувати свою стратегію користувальницького інтерфейсу, і замість того, щоб пофарбувати поле червоним кольором, ви могли пофарбувати межі в червоний колір або поставити поруч невелику червону стрічку (як-от стрічка "Завантаження" стрічки), яка зникає, коли поле знаходиться в фокус.

Це шматок пирога з jQuery:

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

Або якщо ви хочете бути трохи більш вибіркові, додайте назву класу для селектора.

На мою думку найпростіший спосіб:

1. Отримайте http://www.quirksmode.org/js/detect.html

2. Використовуйте цей код:

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

Застосувавши @Benjamin його рішення, я з'ясував, що натискання кнопки "назад" все одно надасть мені жовту родзинку.

Моє рішення якось запобігти поверненню цієї жовтої родзинки - застосувати наступний JavaScript 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>

Сподіваюся, це допомагає кому-небудь !!

Це працює. Найкраще, що ви можете використовувати значення rgba (хак-вставка в тінь не працює з rgba). Це невеликий твіст відповіді @ Бенджаміна. Я використовую $ (document) .ready () замість $ (window) .load (). Мені здається, що це працює краще для мене - зараз ВІДБУТЬ набагато менше Я не вірю, що у використанні $ (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);
        });
    });
};

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

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

input:focus { outline:none; }

Для мене це спрацювало чудово, але більш ніж ймовірно, що на вашому веб-сайті будуть рівномірними речі, які ви хочете також включити в свій CSS для текстових областей:

textarea:focus { outline:none; }

Крім того, для більшості це може здатися очевидним, але для початківців ви також можете встановити його під такий колір:

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

Якщо я правильно пам’ятаю, важливе правило таблиці таблиць стилів для кольору фону входів буде замінено автоматичне заповнення панелі інструментів Google - імовірно, те саме було б і для Chrome.