web-dev-qa-db-ja.com

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

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

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

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

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

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

cssvalidationgoogle-chromehtml-input
151
Dave Rutledge

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

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

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

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

<form autocomplete="off" ...>
74
Ben Hoffstein

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

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

ブラウザが同様に背景色を追加する場合、これは次のように修正できます

:focus { background-color: #fff; }
136
John Leidegren

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

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}
56
JStormThaKid

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

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

*:focus { outline:none; }

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

.nohighlight:focus { outline:none; }

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

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

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

7
Kita

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

2
Mostlyharmless

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

  1. 取得 http://www.quirksmode.org/js/detect.html

  2. このコードを使用してください：

    if (BrowserDetect.browser == "Chrome") {
  jQuery('form').attr('autocomplete','off');
};
1
Tim

JQueryを使用した簡単な手順です。

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

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

1
hohner

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

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

1
321X

これは動作します。何よりも、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);
        });
    });
};
1
Vin

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

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
1
hsobhy
input:focus { outline:none; }

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

textarea:focus { outline:none; }

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

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