ブラウザのフォーム入力と入力の強調表示をHTML / CSSでオーバーライドする

139

サインインとサインアップの2つの基本的なフォームがあります。どちらも同じページにあります。今、私はフォームの自動入力のサインに問題はありません、サインアップフォームの自動入力も同様で、私はそれが好きではありません。

また、フォームスタイルの背景が黄色になり、上書きすることができず、インラインCSSを使用して上書きすることはできません。黄色に着色されないようにするにはどうすればよいですかおよび（おそらく）自動入力？前もって感謝します！

html  css  input  autofill 
— カスラフ
ソース
4
あなたは本当にここで2つの質問をしている：フォームの自動入力を無効にする方法？-および-フォームの自動入力が有効になっているときに黄色の背景を上書きする方法は？以下の回答にあるすべてのコメントを読むまで、これは明確ではありませんでした。質問の編集を検討することをお勧めします（特に、報奨金を提供するために行った場合）。
— ベンザド
あなたは正しい、編集されました。またはとにかくそれの怠惰なバージョン。
— casraf
1
フォームのユーザーとして、オートコンプリートを強制してハイライト表示をオフにすることにより、視覚的な好みのために、使いやすさが損なわれるのは嫌です。あなたではなく、ユーザーにこれをオフにさせます。ブラウジングエクスペリエンスはそのままにしておきます。
— Byran Zaugg
それは、私が登録フォームでオートコンプリートを無効にしたことだけです。基本的に、通常のオートコンプリートは必要ありません。完了情報は、サインアップして初めて作成されます。ログインフォームについては、オートコンプリートをオンにしたいのですが、内部のテキストが判読不能になるため、入力フィールドに配置されるダム色を無効にしています-背景は黄色で、テキストの色は白です（元の背景は濃い灰色） 。
— casraf 2010年
1
— zzzzBov 2013年

回答:

163

オートコンプリートには、次を使用できます。

<form autocomplete="off">

着色問題に関して：

スクリーンショットから、webkitが次のスタイルを生成することがわかります。

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1）＃id-stylesは.classスタイルよりもさらに重要であるため、以下が機能する可能性があります。

#inputId:-webkit-autofill {
    background-color: white !important;
}

2）それがうまくいかない場合は、プログラムでJavaScriptを介してスタイルを設定してみることができます 

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3）それがうまくいかない場合、あなたは運命にあります:-)これを考慮してください：これは黄色を隠すことはありませんが、テキストを再び読みやすくします。

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

4）css / javascriptソリューション：

css：

input:focus {
    background-position: 0 0;
}

次のjavascriptをonloadで実行する必要があります。

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

例えば：

<body onload="loadPage();">

幸運を ：-）

5）上記のいずれの方法でも入力要素を削除、複製せず、複製された要素をページに戻す場合（Safari 6.0.3で機能）：

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6）ここから：

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);
        });
    });
}
— フィル・リコフ
ソース
（1）動作しません。家に帰ったら（2）をやってみます。うまくいけば、JSはこれをオーバーライドできます。おかげで:)
— casraf 2010年
1
（4）黄色の：focus境界を確実に削除します。
— ruruskyi 2012
最後のビットがあなたのために機能せず、あなたはjavascriptがどのように機能するかを知っています（IDの権利を手に入れましたなど）あなたは私が抱えていた問題を抱えている可能性があります、私はいくつかの理由でjquery mobileを使用しています、これは後で初期化され、入力を置き換えますそうみたいです。だから私がやったことは50ミリ秒ごとにそれを複製する間隔を設定することです（それはsetTimeoutを使用して400ミリ秒後に機能しましたが、遅い接続の危険を冒したくありません）。第二の後に間隔が削除されます：code
— Mathijs Segers
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— Mathijs Segers 2013
MavericksのSafariでも同様の問題が発生しています。しかし、方法5を採用すると、1秒（またはタイムアウトを3000に設定した場合は3秒）デュークし、ブラウザーが勝ってオートコンプリートがオンになります。私の使用例では、他のサイトから情報をプルできるように、ユーザーに別のサイトのユーザー名/パスワードを要求しているので、ユーザーが自分のサイトで使用するユーザー名とパスワードを自動入力したくありません。これについての考え（元の＃3の破滅以外）？
— Jack RG、2014年
218

シャドウの内側に「強い」トリックを設定します。

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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— タマスパップ
ソース
10
これは本当に賢いです。:)
— ジョーダングレイ
3
+1000（可能な場合）ええ、これを行う他の方法は考えられません。これは本当にwebkitの邪魔になります...
— o_O
1
— 素晴らしくてこれが一番の
3
これは機能し、本当に創造的であるという点で素晴らしいです。しかし、それは私に古いIE6ハックなどを思い出させます。：-webkit-autofillパラメータを与えてデザイナーにデフォルトを上書きさせないようにするためのグーグルのちょっとくだらないことですよね？
— squarecandy 2016年
1
カスタマイズできない色の選択を提供しても、使いやすさやアクセシビリティには役立ちません。これらの懸念は、Chromeのこの苛立たしいハックを除いて、まだ完全に開発者の手に委ねられています。Chrome開発者の意図を失敗させることはできません。
— Lunster
25

このCSSルールを追加すると、黄色の背景色が消えます。:)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
ソース
1
これはうまくいきました-ありがとう！（私は私が実際に望んだ色に白を変更する必要がありましたが）
— jennEDVT
2
明らかに最良の答えです。
— ブランドンハリス
16 
<form autocomplete="off">

ほとんどすべての最近のブラウザーはそれを尊重します。

— ジェイソン・ケスター
ソース
7
すばらしいですが、重要度の低い問題のみが解決されます。オートコンプリートを維持しながら、スタイル（prntscr.com/4hkh）を失うにはどうすればよいですか？o：ありがとう
— casraf 2010
1
実際には、両方を行う必要があります。ボックスは黄色に変わるだけで、chrome / safari / ffがパスワードを自動入力したことを知らせます。あなたが記入していないことを教えている場合、それは、色それにチャンスを得ることはありません。
— ジェイソン・ケスター
11
はい、しかし私が言ったことを見てください：「どうすればオートコンプリートを維持しつつ、スタイルの Webkitの足を失うことができますか」
— casraf
唯一の問題はautocomplete、それがバージョン5の前にHTMLに無効だということです
— ポールD.ウェイト
15

検索の2時間後、Google Chromeはまだなんとかして黄色を上書きしているようですが、私は修正を見つけました。ホバー、フォーカスなどにも使用できます。あなたがしなければならないすべてはそれに追加!importantすることです。

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

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

— ドン
ソース
1000pxがなくても機能します。どこでも0、-webkit-box-shadow：0 0 0 0 white inset！important;
— Luis Lopez
3

また、フォーム要素のname属性を、生成されたものに変更して、ブラウザーが追跡しないようにすることもできます。ただし、Firefox 2.x +とgoogle chromeでは、リクエストURLが同じであれば、それほど問題はないようです。基本的に、サインアップフォームにsaltリクエストパラメータとsaltフィールド名を追加してみてください。

しかし、私はautocomplete = "off"がまだ一番の解決策だと思います:)

— ドミトリー・リクテン
ソース
3

HTML5の時点で（を介してautocomplete="off"）自動補完を無効にすることができますが、ブラウザの強調表示を上書きすることはできません。::selectionCSSをいじってみることもできます（ほとんどのブラウザーは、それを機能させるためにベンダープレフィックスが必要です）。

ブラウザーベンダーがベンダー固有の方法でオーバーライドする方法を具体的に実装していない限り、ユーザーのサイトのスタイルシートをオーバーライドすることをすでに目的としているそのようなスタイルについては何もできません。これらは通常、スタイルシートが適用された後に適用され、! importantオーバーライドも無視されます。

— アランプラム
ソース
3

<form>要素にコードがあるだけで、ブラウザのオートコンプリートがオートコンプリートになる場合があります。

<input>エレメントにも入れてみましたが、うまくいきました。

<form autocomplete="off">  AND  <input autocomplete="off">

この属性のサポートは終了しました。https：//bugzilla.mozilla.org/show_bug.cgi？id = 956906＃c1をお読み ください

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

私が見つけた別の回避策は、それがメール、ユーザー名、または電話フィールドであることを示唆する入力フィールド内のプレースホルダーを取り除くことです（つまり、「あなたのメール」、「メール」など）。

ここに画像の説明を入力してください

これにより、ブラウザはそれがどのような種類のフィールドであるかを認識できないため、オートコンプリートを試みません。

— andstud.io
ソース
私がこれについて気に入っているのは、ほとんどの人がページのリロード時にフォーム全体が入力されないこと（たとえば、長いテキスト領域）を認めないが、開発者が特定の要素（たとえば、銀行カード番号）が入力されないようにすることです。厄介なことに、この属性のサポートは終了します
— ルークマダンガ
1

入力フィールドにある場合は、「黄色を外す」ことを試みています...

  1. cssで背景色を設定します... #ccc（ライトグレー）としましょう。
  2. value = "sometext"を追加します。これにより、フィールドに「sometext」が一時的に入力されます
  3. （オプション）実際のテキストを挿入するときに「sometext」を明確にするために、小さなJavaScriptを追加します。

したがって、次のようになります。

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— 白馬
ソース
1

これにより、SafariとChromeの両方の問題が修正されます

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— アルジャン
ソース
1
私はそれができると信じていますが、これを毎秒50回行うのは少し厳しいと思いませんか？私はそれがうまくいくことを知っていて、あまり遅くなりません。しかし、少し多すぎるようです。
— Mathijs Segers 2013
0

リンクしたスクリーンショットは、WebKitがinput:-webkit-autofillこれらの要素のセレクターを使用していることを示しています。これをCSSに入れてみましたか？

input:-webkit-autofill {
    background-color: white !important;
}

それが機能しない場合、おそらく何も機能しません。これらのフィールドはハイライト表示され、個人情報（ユーザーの自宅の住所など）が自動入力されたことをユーザーに警告します。ページを非表示にすると、セキュリティリスクが高まると主張できます。

— ベンザド
ソース
0

form要素は持っているautocompleteあなたが設定できるという属性をoff。CSSの時点で、!importantプロパティの後のディレクティブはそれがオーバーライドされないようにします：

background-color: white !important;

IE6だけがそれを理解しません。

私があなたを誤解しているなら、outlineあなたが役に立つと思うプロパティもある。

— Zneak
ソース
2
入力フィールドに自動入力するとき、Chromeは！importantを無視するようです
— Torandi
@Torandiユーザーエージェントのスタイルシートが原因である可能性があります。ユーザーエージェントスタイルシートの設定は、!importantディレクティブがない限り最後に適用する必要があります。この場合、ディレクティブは他のすべてのものよりも優先されます。ユーザーエージェントのスタイルシートを確認する必要があります（ただし、どこにあるかわかりません）。
— zneak '25年
0

JavaScriptでGoogleツールバーのオートコンプリート機能が無効になっているのを見てきました。他のいくつかの自動入力ツールで動作する可能性があります。オートコンプリートに組み込まれているブラウザーに役立つかどうかはわかりません。

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
— アダム
ソース
0

多くのことを試した後、自動入力されたフィールドを無力化し、それらを複製されたものに置き換える作業ソリューションを見つけました。添付されたイベントを失うことなく、私は別の（少し長い）ソリューションを考え出しました。

「入力」イベントごとに、関係するすべての入力に「変更」イベントをすばやく添付します。自動入力されたかどうかをテストします。はいの場合、ブラウザをだまして値がユーザーによって変更されたと見なす新しいテキストイベントを送出し、黄色の背景を削除できるようにします。

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
— アーネストカールソン
ソース
0

すべてのブラウザ用のシンプルなJavaScriptソリューション：

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

入力の複製、属性のリセット、元の入力の非表示。iPadにはタイムアウトが必要です

— ダニ
ソース
0

ブラウザーはパスワードタイプのフィールドを検索するため、別の回避策はフォームの先頭に非表示フィールドを含めることです：

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— Kt Mack
ソース
0

私は非常に多くのスレッドを読み、非常に多くのコードを試しました。これらすべてを収集した後、ログインフィールドとパスワードフィールドをきれいに空にし、背景を白にリセットする唯一の方法は次のとおりです。

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

気軽にコメントしてください。もしあなたが何か見つけたら、私はすべての拡張機能を利用できます。

— TwystO
ソース
0

オートコンプリートオフは、最新のブラウザーではサポートされていません。私が見つけたオートコンプリートを解決する最も簡単な方法は、HTMLとJSを使用した小さなトラックでした。まず最初に、HTMLの入力タイプを「パスワード」から「テキスト」に変更します。

<input class="input input-xxl input-watery" type="text" name="password"/>

ウィンドウが読み込まれた後にオートコンプリートが開始されます。それで大丈夫です。しかし、フィールドのタイプが「パスワード」ではない場合、ブラウザは入力する必要があるフィールドを認識していませんでした。したがって、フォームフィールドにオートコンプリートはありません。

その後、イベントfocusinをパスワードフィールドにバインドします。バックボーン：

'focusin input[name=password]': 'onInputPasswordFocusIn',

ではonInputPasswordFocusIn、単純なチェックでフィールドのタイプをパスワードに変更するだけです。

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

それで終わりです！

UPD：これは無効なJavaSciprtでは機能しません

2018年にUPD。面白いトリックも見つかりました。readonly属性を入力フィールドに設定し、フォーカスイベントで削除します。最初にブラウザがフィールドに自動入力するのを防ぎ、2番目はデータの入力を許可します。

— volodymyr3131
ソース
オートコンプリートは標準の一部ですが、使用方法と実装は異なる場合があります。また、IEで入力タイプを変更すると、なぜjQueryのブロックにある、見事に失敗しますが、あなたはIEをサポートすることを計画している場合、一般的にそれは良い考えではありませんdeveloper.mozilla.org/en-US/docs/Web/Security/...を
— casraf
@casraf申し訳ありませんが、これは標準の一部ですが、必要に応じてすべての最新のブラウザで動作するわけではないため、発明された機能を実行しません。EDGEでは以前のバージョンでは何も
— わかり
確かに、どこにでも実装されているわけではありません。問題は、IEをどのくらい前にサポートしたいかに応じて、v 11より前でもまだ残っています。入力タイプを変更できるとは思いません。古いバージョンが気にならない場合はautocomplete=off、FF、しばらくChrome、以前のバージョンほどのIEで機能するを使用することもできます
— casraf
私は入力とフォームの両方にautocomplete = offを使用しようとしましたが、Chromeはまだサインアップとサインインフォームのデータ（一部ではありません=）
— volodymyr3131 2017年
確かに、これらの基準は実際に一貫して守られているわけではありません。それは残念だ、私たちの生活をより困難にする:(
— casraf
0

また、テキストの色を暗い色に変更する必要がありました（StackOverflowの暗いテーマの色を参照）。

そのため、@TamásPap、@ MCBL、および@donのソリューションがハイブリッドになった。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
— アンドレイ
ソース
-3

これをあなたのCSSに入れないのはなぜですか：

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

これで問題が解決します。ただし、ユーザーが以前のようにフォームに自動入力されたことをユーザーが確認できないため、使いやすさの問題が発生します。

[編集]これを投稿した後、私は同様の回答が既に与えられていること、そしてあなたがそれが機能しないとコメントしたことを見ました。私がテストしたときにうまくいったので、なぜだかよくわかりません。

— クリス
ソース
ChromeとSafariの両方では機能しません。スタイルがあるinput:-webkit-autofillとinput --webkit-autocomplete単純に存在していない
— ruruskyi
@EliseuMonar：私は嘘をついていなかったと確信していますが、それをどのようにまたはどこでテストしたかの詳細は思い出せません。コード自体はおそらくコピー/貼り付けではなく、メモリから入力されたので、オートコンプリートとオートフィルのどちらですか？私は知らないよ。
— クリス
-3

ここでの実際の問題は、Webkit（Safari、Chromeなど）にバグがあることです。ページに複数の[フォーム]があり、それぞれに[input type = "text" name = "foo" ...]がある（つまり、属性 'name'に同じ値を持つ）場合、ユーザーがページへの自動入力は、送信された[フォーム]ではなく、ページの最初の[フォーム]の入力フィールドで行われます。2回目は、NEXT [フォーム]が自動入力されます。同じ名前のテキスト入力フィールドがある[フォーム]のみが影響を受けます。

これはWebkit開発者に報告する必要があります。

Operaは正しい[フォーム]に自動入力します。

FirefoxとIEは自動入力しません。

だから、私はもう一度言います：これはWebkitのバグです。

— リンドバーグあたり
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.