Comment puis-je styliser une saisie de texte pour qu'elle ressemble à un champ de mot de passe à l'aide de CSS ?

Styler le texte de saisie pour qu'il ressemble au champ de mot de passe à l'aide de CSS

Défi :

De nombreux formulaires Web incluent des champs de saisie avec le " type=texte". Bien que cet attribut permette aux utilisateurs de saisir du texte visible, il peut être souhaitable de masquer les informations sensibles en affichant plutôt des astérisques, comme dans un champ de saisie avec l'attribut "type=password".

Solution avec CSS :

CSS apporte une solution pour relever ce défi. Les propriétés -webkit-text-security et text-security offrent un moyen de masquer la saisie de texte dans les navigateurs :

Code :

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

Implémentation :

Appliquez la classe "pw" au champ de saisie :

<code class="html"><input type="text" class="pw" value="abcd"></code>

Fonctionnalités supplémentaires :

Pour les navigateurs qui ne prennent pas en charge ces propriétés, envisagez de fournir une option de secours ou d'utiliser une solution basée sur JavaScript.

Compatibilité des navigateurs :

La propriété -webkit-text-security est prise en charge dans WebKit- navigateurs basés sur, tandis que la propriété text-security est prise en charge dans les navigateurs modernes. Pour la compatibilité avec IE8, une solution de secours CSS ou JavaScript est recommandée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!