パスワード表示ボタンをカスタマイズする

password Microsoft Edge の入力の種類には、パスワード表示ボタンが含まれています。 パスワードが正しく入力されていることを確認するには、ユーザーが パスワード表示 ボタンをクリックするか 、Alt キーを押しながら F8 キーを押してパスワード フィールドに文字を表示します。 パスワード表示コントロールを削除するか、コントロールのスタイルをカスタマイズできます。

既定では、 パスワード表示 ボタンはオフになっているため、 パスワード フィールドでは、ユーザーが入力した文字がドットで置き換えられます。 [パスワードの表示] ボタンが、パスワード フィールドの右側に目の形をしたアイコンとして表示されます。

ユーザーが パスワード表示 ボタンをクリックして有効にすると、パスワード テキストが表示され、目のアイコンが変更されてスラッシュが表示されます。

既定では、 が に"password"設定されているすべての HTML input 要素の Shadow DOM にパスワード表示ボタンがtype挿入されます。 Microsoft Edge バージョン 87 以降、ユーザーまたは企業は、この機能 を グローバルに無効にすることができます。 Web デザイナーと開発者は、ほとんどの Microsoft Edge ユーザーに既定のエクスペリエンスがあることを期待する必要があります。

パスワード表示コントロールを削除する

Web ページの作成者は、擬似要素をターゲットにすることで、 パスワード表示 ボタンを完全に ::-ms-reveal 削除できます。

::-ms-reveal {
    display: none;
}

ただし、 パスワード表示 ボタンを利用することを検討する必要があります。 ネイティブ パスワード表示 ボタンには、動作に組み込まれている重要な セキュリティ対策 があります。

コントロール スタイルをカスタマイズする

コントロールを完全に削除する代わりに、Web サイトのビジュアル言語に合わせて パスワード表示 ボタンのスタイルを変更できます。 次のスニペットは、このようなスタイル設定の例を示しています。

::-ms-reveal {
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 3px currentColor;
}

パスワード表示ボタンのスタイルを設定するときは、次の点に注意してください。

• 目のアイコンは背景画像として実装されます。 パスワード表示ボタンに背景色を追加するには、短縮形プロパティの代わりに CSS background-color プロパティをbackground使用します。

• パスワード表示ボタンのサイズとスケールを調整できます。

  注:

  ブラウザーは、パスワード入力コントロールの境界外にあるオーバーフローを非表示にします。

• 現在、 パスワード表示 ボタンの切り替え状態のスタイルを設定するための状態セレクターは使用できません。

コントロールの可視性

パスワード表示ボタンは、ユーザーがパスワード フィールドにテキストを入力するまで使用できません。 ユーザーのパスワード 入力を安全に保つために、ブラウザーは次のシナリオではボタンを抑制します。

• フォーカスがパスワード フィールドから移動すると、ブラウザーはパスワード表示ボタンを削除します。

• スクリプトによって パスワード フィールドが変更された場合、ブラウザーは パスワード表示 ボタンを削除します。

パスワード表示ボタンが削除された場合、パスワード公開ボタンを再度表示するには、パスワード フィールドの内容を削除する必要があります。 この動作により、ユーザーがロック解除されたデバイスから離れた場合に、ユーザーがパスワードを表示するように小さな調整を行うのを防ぐことができます。

パスワード マネージャーを使用してパスワード フィールドが自動入力されている場合、パスワード表示ボタンは使用できません。