Chromeでサイトの入力ボックスが黄色くならないようにするにはどうすればよいですか？

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

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

それで、その問題を回避しようとするために、入力ボックスの色を変更しないようにするためのより簡単な方法はありますか？

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

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

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

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

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

...およびフォーム全体

<form autocomplete="off" ...>

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

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

（Bill Beckelmanから：CSSを使用してアクティブフィールドの周りのChromeの自動境界を上書きします）

はい、それは大きな頭痛の種になるでしょう。私の意見ではそれは価値がありません。おそらく、UI戦略を少し調整して、ボックスを赤で着色する代わりに、境界線を赤で着色するか、ボックスの中にあるときに消える小さな赤いテープ（Gmailの「Loading」テープなど）を置くことができます。フォーカス。

これは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の彼のソリューションを適用した後、戻るボタンを押しても黄色のハイライトが表示されることがわかりました。

私の解決策何とか戻ってきて、この黄色のハイライトを防止するには、以下の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>

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

これは機能します。何よりも、rgba値を使用できます（ボックスシャドウインセットハックはrgbaでは機能しません）。これは、@ Benjaminの回答を少し調整したものです。$（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);
        });
    });
};

今日のバージョンでは、これは2つのログイン入力の1つに配置されている場合にも機能します。また、バージョン40以降およびFirefoxの最新の問題を修正します。

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

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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

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