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

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

WBOY

リリース： 2016-05-16 15:36:58

オリジナル

2249 人が閲覧しました

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" を設定してフォームの自動入力をオフにし、パスワードを自分で記憶します

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

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