Chromeがサイトの入力ボックスを黄変させないようにするにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/175951

質問

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

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

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

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

私が知る限り、オートコンプリート属性を使用する以外の方法はありません（機能しているように見えます）。

役に立ちましたか？

解決

Firefoxでは、属性autocomplete =＆quot; off＆quot;を使用できることを知っています。オートコンプリート機能を無効にします。これが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の「ロード中」テープなど）を置いて、ボックスが消えると消える場合がありますフォーカス。

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値を使用できます（rgbではbox-shadow insetハックは機能しません）。これは、@ 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つのログイン入力のいずれかに配置されている場合にも機能します。また、バージョン40以降およびFirefoxの最新の問題を修正します。

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

input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top