Chromeブラウザ_JavaScriptスキルでフォームが自動的に入力されるときにブラウザによって自動的に追加されるデフォルトのスタイルを削除する方法

1. この問題の原因は、アカウントのログイン ページを作成するときに、入力フォームに背景画像が追加され、自動的に入力されると、背景が薄黄色で表示されるためです。

その理由は、急いで input 要素に直接設定したため、問題が発生したためです。したがって、このアイコンを入力フォームの外に配置すると、この問題は発生しません。

2. フォームの自動入力に追加されるブラウザーのデフォルトのスタイルに対処および回避する方法

2 番目の図は、フォームが自動的に入力された後、Chrome がデフォルトで input:-webkit-autofill プライベート属性を自動的に入力された入力フォームに追加することを示しています

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

ここに追加されたコードを見たときは、スタイル オーバーライドを使用して解決することを考えます。 ! important を使用すると、優先度を高めることができます。しかし、問題があるので追加します。重要: 元の背景とフォントの色を上書きすることはできません。Chrome のデフォルトの背景色、背景画像の定義を除き、色は使用できません。

! important は優先度を高めます。他の属性を使用して優先度を高めることができます。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

アイデアは 2 つあります。 1. パッチを適用してバグを修正します。 2. ブラウザの組み込みフォーム入力機能をオフにします

シナリオ 1: 入力テキスト ボックスの背景は単色です

解決策:

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

シナリオ 2: 入力テキスト ボックスは画像の背景を使用します

解決策:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

まず、Chrome であるかどうかを判断し、Chrome である場合は、input:-webkit-autofill 要素を走査し、値の取得、追加、削除などの操作を通じて実装します。 この方法は機能しません! ！

結局、アイコンを入力フォームの背景画像として使用せず、代わりに追加のラベルを作成してアイコンをフォームの外に持ち出しました。

アイデア 2: ブラウザーの組み込みフォーム入力機能をオフにする

フォーム属性 autocomplete="off/on" を設定してフォームの自動入力をオフにし、パスワードを自分で記憶します

<フォームオートコンプリート="オフ" メソッド=".." アクション="..">

図に示すように: 自動入力前、このメールボックスの小さなアイコンは入力フォームの背景画像です

図に示すように: 入力後、小さなメールボックス アイコンはブラウザのデフォルト スタイルで上書きされます

最後に

Chrome ブラウザでフォームが自動的に入力されるときにデフォルトのスタイルを追加したくない場合は、この小さなアイコンをフォームの外に配置します。これは入力ボックスであるためです

。

境界線の下のみ。入力ボックスに境界線がある場合は、div 境界線を使用して入力ボックスの境界線のふりをし、入力ボックスに境界線を持たないようにする必要がある場合があります。

このような入力ボックス

上記の方法により、友人がブラウザにデフォルトのスタイルを自動的に追加する問題を解決できるようになりました。友人は安心してこの記事を参照できます。