web-dev-qa-db-ja.com

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

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

これがスクリーンショットです。

alt textalt text

その背景を削除するか、単にこの自動入力を無効にするにはどうすればよいですか？

htmlcssformsgoogle-chromeautofill
244
hsz

「白」を好きな色に変更してください。

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

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

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;
}
45
Gísli Freyr Svavarsson

解決策 ここ ：

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);
        });
    });
}
43
Alessandro Benedetti

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

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

正常に動作するため、Chromeでこれをテストできます。

26
Kinlan

オートフィル、さらにデータ、アタッチされたハンドラ、および入力要素にアタッチされた機能を保持したい場合は、次のスクリプトを試してください。

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に挿入して元の要素を削除します。自動入力はページのロード後に1秒かかることがあるため、複製するものが見つかるとポーリングを停止します。これは以前のコードサンプルの変形ですが、より堅牢であり、できるだけ多くの機能を損なわないようにしています。

（Chrome、Firefox、およびIE 8での動作確認済み）

25
Jason

次の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でブラウザのフォーム入力と入力ハイライトを上書きする

16
humbads

私のために働いた、唯一のCSSの変更が必要です。

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

＃ffffffの代わりに任意の色を付けることができます。

6
Milan

ちょっとハッキーですが、私にとっては完璧に動作します

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

これにより、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);
}
3
Arjan

答えの組み合わせは私のために働いた

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

私はこれを使います

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 */
2
Bhavesh Gangani

これが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);                                               


    }
});
2
Confidant

これは私にとって役に立ちました、CSSのみのバージョンです。

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

どこ白あなたが望む任意の色にすることができます。

2
Matt Goo

あなたのタグの中に、単にこの小さなコード行を挿入してください。

autocomplete="off"

ただし、これをusername/email/idnameフィールドに配置しないでください。まだオートコンプリートを使用したい場合は、このフィールドでは無効になります。しかし、私はこれを回避する方法を見つけました。パスワードをオートコンプリートすることは決してないので、単純にコードをパスワード入力タグに入れてください。この修正により、色の力が取り除かれ、メールアドレス/ユーザー名フィールドのオートコンプリート機能が最大限に発揮され、JqueryやJavascriptのような大きなハックを回避できるようになります。

1
Alex Sarnowski

あなたがそれを完全に取り除きたいのであれば、私は前の答えでコードを調整しました。

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

私にとってうまくいく唯一の方法は次のとおりです。（jQueryが必要）

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

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

        $(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">
0
Андрій Глущенко

これは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);
    });
}
0
And Finally

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

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

JQueryを使って入力テキスト値を削除する

JQueryを使って入力タイプをパスワードに変換する

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

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

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);});
0
Dustin Silk

運賃namrouti答えは正しいです。ただし、入力が選択されているの場合、背景はまだ黄色になります。 !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;
}
0
Merlin

あなたのcssが適用されるまで黄色のちらつきを避けたいならば、そのようなその悪い男の子の上にトランジションをたたいてください：

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

その解決策はどうでしょうか。

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-on cssクラスを指定します。

0
cryss

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

それで、私は「Chromeはどのようにして与えられたページに自動記入されるべきものを決定するのですか」と自問しました。

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

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

1）パスワード入力をテキスト入力の前に置きます。 2）同じ名前とIDを付けるか、または名前とIDを付けないでください。

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

そして、Chromeはそれが何に当たったのかわかりません...オートコンプリートはオフのままです。

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

Chrome 34.0.1847.116、OSX 10.7.5

0
i_a

autocomplete="off"を追加することはそれを切るつもりではありません。

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

これが時間を節約することを願っています。

0
Matas Vaitkevicius