Google Chromeフォームの自動入力とその黄色の背景

Google Chromeとそのフォームの自動入力機能のデザインに問題があります。Chromeがログイン/パスワードを覚えている場合、背景色を黄色に変更します。

ここにいくつかのスクリーンショットがあります：

その背景を削除する方法、またはこの自動入力を無効にする方法は？

「白」を任意の色に変更します。

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

透過的な入力フィールドが必要な場合は、遷移と遷移遅延を使用できます。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

ここでの解決策：

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

Firefoxでは、autocomplete = "off / on"属性を使用して、フォームのすべてのオートコンプリートを無効にすることができます。同様に、個々のアイテムのオートコンプリートは、同じ属性を使用して設定できます。

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

正常に機能するように、これをChromeでテストできます。

自動入力だけでなく、データ、アタッチされたハンドラー、入力要素にアタッチされた機能も保持したい場合は、次のスクリプトを試してください。

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

自動入力要素が見つかるまでポーリングし、データとイベントを含めてそれらを複製し、同じ場所のDOMに挿入して元の要素を削除します。自動読み込みではページの読み込み後に2秒かかることがあるので、複製するものが見つかるとポーリングを停止します。これは、前のコードサンプルのバリエーションですが、より堅牢であり、可能な限り多くの機能をそのまま維持します。

（Chrome、Firefox、IE 8で動作することが確認されています。）

次のCSSは、黄色の背景色を削除し、選択した背景色に置き換えます。自動入力は無効にならず、jQueryやJavascriptのハックは必要ありません。

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

コピー元： HTML / CSSによるブラウザーのフォーム入力と入力の強調表示のオーバーライド

私のために働いた、cssの変更のみが必要です。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

#ffffffの代わりに任意の色を使用できます。

少しハッキーですが、私にとっては完璧に機能します

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

答えの組み合わせは私のために働きました

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

これがJasonのMooToolsバージョンです。Safariでも修正されています。

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

これにより、SafariとChromeの両方の問題が修正されます

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

これは、CSSのみのバージョンに役立ちました。

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

ここで、白は任意の色にすることができます。

私はこれを使います

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

タグに、この小さなコード行を挿入するだけです。

autocomplete="off"

ただし、これをユーザー名/メール/ ID名フィールドに配置しないでください。オートコンプリートの使用を検討している場合、このフィールドでは無効になります。しかし、これを回避する方法を見つけました。パスワードをオートコンプリートすることは決してないので、コードをパスワード入力タグに配置するだけです。この修正により、カラーフォース、メール/ユーザー名フィールドのマチナオートコンプリート機能が削除され、Jqueryやjavascriptなどのかさばるハックを回避できるようになります。

それを完全に取り除きたい場合は、以前の回答のコードを調整して、ホバー、アクティブ、フォーカスでも機能するようにしました。

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

これは、Alessandroと同じことを行うMootoolsソリューションです。影響を受ける各入力を新しい入力に置き換えます。

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

その解決策はどうですか：

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

オートコンプリートとオートフィルをオフにし（黄色の背景が消える）、100ミリ秒待ってから、オートフィルなしでオートコンプリート機能を元に戻します。

自動入力が必要な入力がある場合は、auto-complete-onCSSクラスを指定します。

解決策はどれも私にとってうまくいきませんでした、ユーザー名とパスワードの入力はまだ入力されていて、黄色の背景が与えられていました。

それで、「Chromeは特定のページで自動入力するものをどのように決定するのですか？」

「入力ID、入力名を探しますか？フォームID？フォームアクション？」

ユーザー名とパスワードの入力を試してみたところ、自動入力する必要のあるフィールドをChromeが見つけられない原因は2つしかありませんでした。

1）パスワード入力をテキスト入力の前に置きます。2）それらに同じ名前とIDを付けます...または名前とIDを付けません。

ページが読み込まれた後、JavaScriptを使用して、ページ上の入力の順序を変更するか、動的に名前とIDを与えることができます...

そして、Chromeは何が問題かを認識していません...オートコンプリートはオフのままです。

クレイジーなハックだと思います。しかし、それは私のために働いています。

Chrome 34.0.1847.116、OSX 10.7.5

私のために働く唯一の方法は：（jQueryが必要です）

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

私はこのようなパスワードフィールドのこの問題を修正しました：

入力タイプをパスワードではなくテキストに設定します

jQueryを使用して入力テキスト値を削除する

jQueryを使用して入力タイプをパスワードに変換する

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Arjansソリューションの更新。値を変更しようとすると、許可されません。これは私にとってはうまくいきます。入力に焦点を合わせると、黄色になります。その十分に近い。

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

このコードを試してください：

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

ナムルティの正解は正解です。しかし、入力が選択されると、背景はまだ黄色になります。追加し!importantて問題を修正します。あなたもしたい場合textareaとselect同じ動作でちょうど追加textarea:-webkit-autofill, select:-webkit-autofill

入力のみ

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

入力、選択、テキストエリア

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

追加しautocomplete="off"てもカットされません。

入力タイプ属性をに変更しますtype="search"。
Googleは、検索タイプの入力に自動入力を適用しません。

これにより時間を節約できることを願っています。

CSSが適用されるまで黄色のちらつきを回避したい場合は、次のようにその不良少年に遷移を平手打ちします。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

最終的な解決策：

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

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

同様の質問：リンク

同じ質問で自分自身を見つけた。これは私にとってはうまくいきます：

form :focus {
  outline: none;
}