Personnaliser le bouton d’affichage du mot de passe

Le password type d’entrée dans Microsoft Edge inclut un bouton d’affichage du mot de passe . Pour vous assurer que le mot de passe est entré correctement, un utilisateur peut cliquer sur le bouton d’affichage du mot de passe ou appuyer sur Alt+F8 pour afficher les caractères dans le champ de mot de passe. Vous pouvez supprimer le contrôle d’affichage du mot de passe ou personnaliser le style du contrôle.

Par défaut, le bouton d’affichage du mot de passe est désactivé, de sorte que dans le champ de mot de passe , les points remplacent les caractères entrés par l’utilisateur. Le bouton d’affichage du mot de passe apparaît à droite du champ de mot de passe , sous la forme d’une icône en forme d’œil :

Lorsque l’utilisateur clique sur le bouton d’affichage du mot de passe pour l’activer, le texte du mot de passe est affiché et l’icône d’œil change pour avoir une barre oblique dessus :

Par défaut, le bouton d’affichage du mot de passe est inséré dans le DOM d’ombre de tous les éléments HTML input dont la type valeur est définie "password"sur . À compter de La version 87 de Microsoft Edge, les utilisateurs ou les entreprises peuvent désactiver cette fonctionnalité globalement. Les concepteurs et développeurs web doivent s’attendre à ce que la plupart des utilisateurs de Microsoft Edge disposent de l’expérience par défaut.

Supprimer le contrôle d’affichage du mot de passe

En tant qu’auteur de la page web, vous pouvez supprimer complètement le bouton d’affichage du mot de passe , en ciblant le ::-ms-reveal pseudo-élément :

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

Toutefois, vous devez envisager de tirer parti du bouton d’affichage du mot de passe . Le bouton d’affichage de mot de passe natif comporte des mesures de sécurité importantes intégrées au comportement.

Personnaliser le style de contrôle

Au lieu de supprimer complètement le contrôle, vous pouvez modifier le style du bouton d’affichage du mot de passe pour mieux correspondre à la langue visuelle du site web. L’extrait de code suivant fournit un exemple de ce type de style :

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

Gardez les éléments suivants à l’esprit lorsque vous stylez le bouton d’affichage du mot de passe :

• L’icône d’œil est implémentée en tant qu’image d’arrière-plan. Pour ajouter une couleur d’arrière-plan au bouton d’affichage du mot de passe , utilisez la propriété CSS background-color au lieu de la background propriété abrégée.

• Vous pouvez ajuster la taille et l’échelle du bouton d’affichage du mot de passe .

  Remarque

  Le navigateur masque tout dépassement en dehors des limites du contrôle d’entrée de mot de passe.

• Actuellement, aucun sélecteur d’état n’est disponible pour appliquer un style à l’état basculé du bouton d’affichage du mot de passe .

Visibilité du contrôle

Le bouton d’affichage du mot de passe n’est pas disponible tant que l’utilisateur n’a pas entré du texte dans le champ de mot de passe . Pour sécuriser l’entrée de mot de passe de l’utilisateur, le navigateur supprime le bouton dans les scénarios suivants :

• Si le focus s’éloigne du champ de mot de passe , le navigateur supprime le bouton d’affichage du mot de passe .

• Si les scripts modifient le champ de mot de passe , le navigateur supprime le bouton d’affichage du mot de passe .

Si le bouton d’affichage du mot de passe est supprimé, l’utilisateur doit supprimer le contenu du champ de mot de passe pour que le bouton d’affichage du mot de passe apparaisse à nouveau. Ce comportement empêche une personne d’effectuer un ajustement mineur pour afficher le mot de passe, si l’utilisateur s’éloigne d’un appareil déverrouillé.

Le bouton d’affichage du mot de passe n’est pas disponible si le champ de mot de passe est rempli automatiquement à l’aide du gestionnaire de mots de passe.