151

フォームの送信や検証後のその他のテキストや視覚的な補助として、注意が必要なインタラクティブな領域を示すために、入力ボックスを赤くしています。

Chrome (および Google ツールバー ユーザーの場合) では、自動入力機能によって入力フォームが黄色に変わります。ここに複雑な問題があります: ユーザーのログインを高速化するため、フォームでオートコンプリートを許可したいです。ページ上の単一の影響を受ける入力のオートコンプリートをプログラムでオフにするためのコーディングのビット。これは、簡単に言えば、大きな頭痛の種です。

その問題を回避するために、Chrome が入力ボックスの色を変更するのを止める簡単な方法はありますか?

[編集] 以下の !important の提案を試しましたが、効果がありませんでした。Google ツールバーをチェックして、!important 属性が機能するかどうかをまだ確認していません。

私が知る限り、 autocomplete 属性を使用する以外に手段はありません (機能しているように見えます)。

4

13 に答える 13

136

CSS アウトライン プロパティを none に設定します。

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

ブラウザが背景色も追加する可能性がある場合、これは次のような方法で修正できます

:focus { background-color: #fff; }
于 2009-02-24T17:40:30.287 に答える
75

Firefox では、属性 autocomplete="off" を使用してオートコンプリート機能を無効にできることを知っています。これが Chrome で機能する場合 (テストしていません)、エラーが発生したときにこの属性を設定できます。

これは、単一の要素の両方に使用できます

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

...フォーム全体と同様に

<form autocomplete="off" ...>
于 2008-10-06T20:09:39.930 に答える
56

これはまさにあなたが探しているものです!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}
于 2014-09-17T02:14:06.387 に答える
14

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);
    });
});}
于 2010-11-23T21:40:24.323 に答える
7

すべてのフィールドの境界線を削除するには、次を使用できます。

*:focus { outline:none; }

選択フィールドの境界線を削除するには、このクラスを必要な入力フィールドに適用するだけです:

.nohighlight:focus { outline:none; }

もちろん、必要に応じて境界線を変更することもできます。

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

(Bill Beckelman から: CSS を使用してアクティブなフィールドの周りの Chrome の自動境界線をオーバーライドする)

于 2011-01-10T11:42:05.433 に答える
2

はい、それは大きな頭痛の種になるでしょう。私の意見では、返品する価値はありません。UI戦略を少し調整して、ボックスを赤くする代わりに、境界線を赤くするか、その横に小さな赤いテープ（gmailの「読み込み中」テープのように）を付けて、ボックスが入ると消えるようにすることができます集中。

于 2008-10-06T20:07:32.443 に答える
2

jQuery を使えば簡単です。

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

または、もう少し選択的にしたい場合は、セレクターのクラス名を追加します。

于 2012-02-05T19:07:14.777 に答える
1

私の意見では、より簡単な方法は次のとおりです。

  1. http://www.quirksmode.org/js/detect.htmlを取得します

  2. 次のコードを使用します。

    if (BrowserDetect.browser == "Chrome") {
  jQuery('form').attr('autocomplete','off');
};
于 2011-06-05T15:38:01.143 に答える
1

これは機能します。何よりも、rgba 値を使用できます (box-shadow inset ハックは rgba では機能しません)。これは、@ Benjamin's answer を少し調整したものです。$(window).load() の代わりに $(document).ready() を使用しています。私にとってはうまくいくようです-今では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);
        });
    });
};
于 2013-12-19T01:30:15.087 に答える
1

現在のバージョンでは、2 つのログイン入力のいずれかに配置すると、これも機能します。また、バージョン 40 以降および最新の Firefox の問題を修正します。

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
于 2016-04-06T01:47:04.573 に答える
1

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

誰にも役立つことを願っています!!

于 2013-04-11T19:36:52.610 に答える
0 
input:focus { outline:none; }

それは私にとってはうまくいきましたが、あなたのサイトで物事を均一に保つ可能性が高いですが、これをテキストエリアのCSSにも含めたいと思うでしょう：

textarea:focus { outline:none; }

また、ほとんどの人にとっては明白に思えるかもしれませんが、初心者の場合は、次のような色に設定することもできます。

input:focus { outline:#HEXCOD SOLID 2px ; }
于 2011-06-13T10:18:40.447 に答える
-1

私の記憶が正しければ、入力の背景色に関するスタイルシートの !important ルールは、Google ツールバーのオートコンプリートをオーバーライドします。おそらく、Chrome でも同じことが言えます。

于 2008-10-06T20:06:03.023 に答える