web-dev-qa-db-ja.com

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

私が取り組んでいるフォームでは、Chromeはemailとpasswordのフィールドを自動入力しています。これは問題ありませんが、Chromeは背景色を淡い黄色に変更します。

私が取り組んでいるデザインは暗い背景に明るいテキストを使用しているので、これは実際にフォームの外観をめちゃくちゃにします - 私は完全に黄色いボックスと目に見えない白いテキストを持っています。フィールドがフォーカスされると、フィールドは通常に戻ります。

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

autocompleteinputgoogle-chrome
549
DisgruntledGoat

これはうまくいきます、あなたは入力ボックススタイルと入力ボックスの中のテキストスタイルを変えることができます：

ここでは任意の色を使うことができます。 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ピクセルの「ぼかし半径」で完全に隠れます。

1027
Fareed Alnamrouti

もっと良い解決策があります。

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

-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;
}
251
Nathan White

ボックスシャドウを追加する以前の解決策は、無地の背景を必要とする人々のためにうまく機能します。トランジションを追加するもう1つの解決策は機能しますが、期間/遅延を設定する必要があるということは、ある時点で再び表示される可能性があることを意味します。

私の解決策は代わりにキーフレームを使うことです、そうすればそれはあなたが選んだ色を常に表示するでしょう。

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Codepenの例： https://codepen.io/-Steve-/pen/dwgxPB

251
Steve

これが私の解決策です、私はトランジションとトランジションディレイを使ったので、入力フィールドの背景を透明にすることができます。

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;
}
52
Gísli Freyr Svavarsson

この着色動作はWebKitによるものなので、これは設計どおりです。ユーザーはデータが事前に入力されていることを理解できます。 バグ1334

（または特定のフォームコントロールで）オートコンプリートをオフにすることができます。

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

あるいは、次のようにしてオートフィルの色を変えることができます。

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

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

これはWebKitの動作です。

47
Mohamed Mansour

現時点で考えられる回避策は、「強い」内側の影を設定することです。

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;
}
26
Tamás Pap

これを試してオートフィルスタイルを隠す

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;
    }
22
Francisco Costa

上記の答えはすべてうまくいきましたが、欠点がありました。以下のコードは、点滅することなく完璧に機能する、上記の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;
}
18
Jack Russell

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

これは完全に入力フィールドから黄色を削除します

14
don

SASS

input:-webkit-autofill

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

オートコンプリート機能をそのままにしておきたい場合は、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);
    });
});}
8
Benjamin

入力フィールドを透明にする必要があるため、box-shadowを使用できないという問題がありました。ちょっとしたハックですが純粋な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;
}
8
Alex

それに加えて：

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番目の部分は境界を強調表示するためのものです。

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

7
Linghua Jin

これを試してみてください。@ 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;
}
6
Surender Lohia

JQueryを使わずにJavaScriptを使用して別のソリューションを開発しました。あなたがこれが有用であると思うか、または私の解決策を再投稿することに決めたならば、私はあなたが私の名前を含めることを頼むだけです。楽しい。 - ダニエル・フェアウェザー

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ページ内のすべての入力フィールドを確認し、必要に応じて調整することに注意してください。

6
Daniel Fairweather

1時間の遅延を追加すると、input要素に対するCSSの変更が一時停止します。
これは、トランジションアニメーションや内側の影を追加するよりも優れています。

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

私はCSSフィルタを使う純粋なCSSソリューションを持っています。

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

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

見なさい

4
2ne

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

@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);
            }
        }
    }
}
4
jedmao

あなたがグーグルクロムからのオートフィルを防ぎたいけれどもそれの少し「マチェーテ」、あなたが表示する必要がなければ単にグーグルクロムがそれらの入力フィールドに加えるクラスを取り除き、そして値を ""に設定したくない場合解決策ロード後にデータを保存します。

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

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

申し訳ありませんが、私はそれがコメントになることを好むと思います。

あなたが望むならば、私はそれを使用したサイトへのリンクを置くことができます。

3
Jurion

あきらめる！

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

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

解決策のどれも私にはうまくいきませんでした、インセットシャドウは私にはうまくいきません。なぜなら、入力はページの背景の上に半透明の背景があるからです。

それで、私は「Chromeはどのようにして与えられたページに自動記入されるべきものを決定するのですか」と自問しました。

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

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

1）パスワード入力をテキスト入力の前に置きます。 2）同じ名前とIDを付けるか、または名前とIDをまったく付けないでください。

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

そして、Chromeは何がそれを打ったのかわからない...オートコンプリートは壊れています！

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

Chrome 34.0.1847.116、OSX 10.7.5

2
i_a

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

私は$('input:-webkit-autofill')を使ってフィールドを得ることができないので、Mootoolsソリューションはもう少しトリッキーです、それで私が使ったものは以下です：

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
}
2
andi

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

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;
    }
}
2
Waqas Anwar

残念ながら、厳密には上記の解決策のどれも2016年に私のために働きませんでした（質問の数年後）

それで、これが私が使用する積極的な解決策です：

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)">

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

2
FlorianB

これは私のために働いた：

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

前述のように、私のためのinset -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;
}
1
Giedrius Vičkus

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

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;
}
0
Ali Bagheri

これは私のために働いた（Chrome 76がテスト済み）

input:-internal-autofill-selected {
    background-color: transparent;
}
0
guido _nhcol.com.br_

Google Chromeのユーザーエージェントは開発者のCSSname__を防ぐことができますので、autofillUIを変更するには、次のような別のプロパティを使用する必要があります。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}
0
AmerllicA

これは私のために働きます。

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

0
Kostya Harutyunyan

これは、このタスクに対する複雑な解決策です。

(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)
*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>
0
BigClap

-webkit-autofill擬似セレクターを使用して、これらのフィールドをターゲットにし、適切にスタイルを設定できます。デフォルトのスタイル設定は背景色にのみ影響しますが、ボーダーやフォントサイズなど、他のほとんどのプロパティがここに適用されます。以下のスニペットに含まれる-webkit-text-fill-colorを使用して、テキストの色を変更することもできます。

/ * 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;
}
0
Mohit Sharma

簡単、追加するだけ

    autocomplete="new-password"

パスワードフィールドに。

0
Joakim Krassman