Chromeオートコンプリートの入力背景色を削除しますか？

現在作業中のフォームで、Chromeはメールとパスワードのフィールドに自動入力しています。これは問題ありませんが、Chromeは背景色を淡黄色に変更します。

私が取り組んでいるデザインは、暗い背景に明るいテキストを使用しているので、これはフォームの外観を本当に混乱させます-真っ黄色なボックスとほとんど見えない白いテキストがあります。フィールドがフォーカスされると、フィールドは通常に戻ります。

これらのフィールドの色を変更するChromeを停止することはできますか？

これは正常に機能します。入力ボックスのスタイルと入力ボックス内のテキストスタイルを変更できます。

ここでは、例えば、任意の色を使用することができwhite、#DDD、rgba(102, 163, 177, 0.45)。

しかし、transparentここでは機能しません。

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

さらに、これを使用してテキストの色を変更できます。

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

アドバイス：数百または数千の過度のぼかし半径を使用しないでください。これには利点がなく、弱いモバイルデバイスにプロセッサの負荷がかかる可能性があります。（実際の外の影にも当てはまります）。高さが20ピクセルの通常の入力ボックスの場合、30ピクセルの「ぼかし半径」で完全にカバーされます。

ボックスシャドウを追加するこれまでの解決策は、無地の背景が必要なユーザーに適しています。トランジションを追加する他の解決策は機能しますが、期間/遅延を設定する必要があることは、ある時点で再び表示される可能性があることを意味します。

私の解決策は、代わりにキーフレームを使用することです。これにより、常に選択した色が表示されます。

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

コードペンの例：https ://codepen.io/-Steve-/pen/dwgxPB

より良い解決策があります。

背景を以下のような別の色に設定しても、透明な入力フィールドが必要だったため、問題は解決しませんでした

-webkit-box-shadow: 0 0 0px 1000px white inset;

だから私は他のことをいくつか試し、これを思いつきました：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

これが私の解決策です。遷移と遷移遅延を使用したので、入力フィールドの背景を透明にすることができます。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

このカラーリング動作はWebKitからのものであるため、これは設計どおりです。これにより、ユーザーはデータが事前に入力されていることを理解できます。バグ1334

オートコンプリートをオフにするには、次のようにします（または特定のフォームコントロールをオンにします：

<form autocomplete="off">
...
</form

または、次のようにして自動入力の色を変更できます。

input:-webkit-autofill {
    color: #2a2a2a !important;
}

これが再び機能するように追跡されているバグがあります：http : //code.google.com/p/chromium/issues/detail?id=46543

これはWebKitの動作です。

当面の可能な回避策は、シャドウ内に「強い」を設定することです。

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

自動入力スタイルを非表示にするには、これを試してください

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

上記の答えはすべて機能しましたが、欠点がありました。以下のコードは、上記の2つの回答を組み合わせたもので、点滅することなく完璧に機能します。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

検索の2時間後、Googleはまだ黄色をオーバーライドしているようですが、私はその修正を求めています。そのとおり。ホバー、フォーカスなどにも使用できます。あなたがしなければならないすべてはそれに重要な追加です！

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

これにより、入力フィールドから黄色が完全に削除されます

1時間の遅延を追加すると、入力要素のcssの変更が一時停止します。
これは、遷移アニメーションや内側の影を追加するよりも優れています。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

それに加えて：

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

追加することもできます

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

それ以外の場合は、入力をクリックすると黄色が戻ります。フォーカスについて、ブートストラップを使用している場合、2番目の部分はボーダーを強調表示するためのものです0 0 8px rgba（82、168、236、0.6）;

ブートストラップ入力のように見えるように。

入力フィールドを透明にする必要があるため、ボックスシャドウを使用できないという問題がありました。これは少しハックですが、純粋なCSSです。トランジションを非常に長い時間に設定します。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

これを試してください：上記の@ Nathan-whiteと同じですが、微調整を加えます。

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

オートコンプリート機能をそのまま維持したい場合は、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);
    });
});}

JQueryなしでJavaScriptを使用する別のソリューションを開発しました。これが便利であるか、私の解決策を再投稿する場合は、私の名前を含めるようにお願いします。楽しい。– Daniel Fairweather

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

このコードは、追加のテキストが入力されるとすぐにGoogle ChromeがWebkitスタイルを削除するという事実に基づいています。入力フィールドの値を変更するだけでは不十分で、Chromeではイベントが必要です。各入力フィールド（テキスト、パスワード）に注目することで、キーボードイベント（文字「a」）を送信し、テキスト値を以前の状態（自動入力されたテキスト）に設定できます。このコードはすべてのブラウザーで実行され、Webページ内のすべての入力フィールドをチェックし、必要に応じて調整することに注意してください。

CSSフィルターを使用する純粋なCSSソリューションがあります。

filter: grayscale(100%) brightness(110%);

グレースケールフィルターは黄色を灰色に置き換え、明るさは灰色を取り除きます。

コーデックを見る

これは、入力、テキストエリア、および通常、ホバー、フォーカス、アクティブ状態の選択で機能します。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

これは、SASS / SCSSで作業している人のための上記のソリューションのSCSSバージョンです。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

コンパスを使用している人のために：

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

あきらめる！

オートコンプリートで入力の色を変更する方法はないので、webkitブラウザーのjQueryですべての入力を無効にすることにします。このような：

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

自動入力をGoogle Chromeから防ぎたいが、少し「マチェーテ」したい場合の解決策があります。GoogleChromeがこれらの入力フィールドに追加するクラスを削除し、表示する必要がない場合は値を「」に設定しますロード後にデータを保存します。

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

Daniel Fairweatherの解決策（Chromeオートコンプリートの入力背景色を削除しますか？）（私は彼の解決策に賛成したいのですが、それでも15人の担当者が必要です）は本当にうまくいきます。最も支持されている解決策には本当に大きな違いがあります：背景画像を保持できます！しかし、少し変更しました（Chromeチェックのみ）

そして、あなたは覚えておく必要があります、それは目に見えるフィールドでのみ機能します！

したがって、フォームに$ .show（）を使用している場合は、show（）イベントの後にこのコードを実行する必要があります。

私の完全な解決策（ログインフォームの表示/非表示ボタンがあります）：

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

申し訳ありませんが、コメントでお願いします。

必要に応じて、使用したサイトへのリンクを張ることができます。

そしてこれは私のために働きました（テストされたChrome 76）

input:-internal-autofill-selected {
    background-color: transparent;
}

上記のソリューションのほとんどすべてを試しました。何もうまくいきません。最後にこのソリューションで動作しました。誰かがこれを助けてくれることを願っています。

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

ベンジャミン、ありがとう！

を使用してフィールドを取得できないため、Mootoolsソリューションはもう少しトリッキーです $('input:-webkit-autofill')。したがって、私が使用したのは次のとおりです。

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

解決策のどれも私にとってはうまくいきませんでした。入力の背景がページの背景の上に半透明の背景がオーバーレイされているため、インセットシャドウは私にとってはうまくいきません。

そこで、「Chromeは特定のページで自動入力する内容をどのように決定するのですか？」と自問しました。

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

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

1）パスワード入力をテキスト入力の前に置きます。2）それらに同じ名前とIDを付けます...または名前とIDをまったく付けません。

ページが読み込まれた後、JavaScriptを使用すると、ページ上の入力の順序を動的に変更したり、動的に名前とIDを指定したりできます...

そして、Chromeは何がヒットしたかを認識していません...オートコンプリートが壊れています！

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

Chrome 34.0.1847.116、OSX 10.7.5

残念ながら、厳密には上記の解決策のどれも私にとって2016年には機能しませんでした（質問から2年後）

だからここに私が使用する積極的な解決策があります：

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

基本的には、値の保存中にタグを削除し、再作成してから値を元に戻します。

私はこれを使います。私のために働きます。フィールドの黄色の背景を削除します。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

前述のように、私にとっては、インセット-webkit-box-shadowが最適です。

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

また、テキストの色を変更するコードスニペット：

input:-webkit-autofill:first-line {
     color: #797979;
}

これは私のために働きました：

padding: 5px;
background-clip: content-box;