Comment changer la couleur du bouton révéler le mot de passe dans un élément HTML <input type="password"> à l'aide de CSS


scripteur

Le champ de mot de passe dans certains navigateurs (Edge de toute façon) a une petite icône en forme d'œil dans le coin lorsque vous tapez un champ de mot de passe permettant à l'utilisateur de voir le mot de passe au fur et à mesure qu'il le tape. Cependant, il est noir par défaut et je voudrais changer cela il peut donc être vu sur un fond noir.

::-ms-reveal { color: white; } n'a aucun effet.

Existe-t-il un moyen de cibler cet élément, que ce soit un hack ou officiellement ?

petit diable

L'icône de l'œil est implémentée comme une image d'arrière-plan. Vous pouvez modifier la couleur d'arrière-plan avec la background-colorpropriété, mais pour modifier la couleur de premier plan, vous devez créer votre propre image et la remplacer par la background-imagepropriété.

Edit: en parcourant d'autres questions, je suis tombé sur la propriété filter css qui résout assez bien votre problème.

input {
  color: white;
  background-color: black;
}
::-ms-reveal {
  filter: invert(100%);
}

Articles connexes