Comment puis-je ajouter des suffixes de texte personnalisés aux entrées numériques à l'aide de CSS pour une meilleure compréhension de l'utilisateur ?

Améliorez les entrées numériques avec des suffixes de texte personnalisés

Vous disposez de plusieurs entrées numériques représentant des valeurs en millisecondes, dB et pourcentages. Pour améliorer la compréhension de l'utilisateur, vous souhaitez ajouter des suffixes de type à ces entrées, indiquant l'unité de mesure.

Solution utilisant CSS Wrapper et pseudo-élément

Au lieu de modifier le éléments d'entrée eux-mêmes, vous pouvez utiliser un wrapper CSS et un pseudo-élément pour obtenir le résultat souhaité :

1. Créez un div wrapper pour chaque entrée :

   • Ce div positionnera le suffixe du texte et garantira qu'il ne perturbe pas la mise en page.

2. Positionnez le suffixe en tant que pseudo-élément (:: after):

   • Définissez sa position sur absolue, lui permettant de flotter à l'extérieur du div wrapper.
   • Placez-le au décalage spécifié (par exemple, à droite : 0,5em) pour aligner avec l'entrée.

3. Ajustez la position en survol ou en focus :

   • En survol ou en focus dans le wrapper, éloignez légèrement le suffixe (par exemple, à droite : 1,5em). Cela prend en charge les boutons fléchés dans certains navigateurs.

4. Fournissez des suffixes personnalisés :

   • Utilisez des classes CSS distinctes pour chaque unité ( par exemple, .ms, .db, .percent).
   • Définissez la propriété de contenu du pseudo-élément dans chaque classe pour afficher le suffixe souhaité (par exemple, 'ms', 'db', '%').

Exemple de code :

<code class="css">div {
  display: inline-block;
  position: relative;
}
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}</code>

<code class="html"><div class="ms">
  <input type="number" id="milliseconds" />
</div>
<hr />
<div class="db">
  <input type="number" id="decibel" />
</div>
<hr />
<div class="percent">
  <input type="number" id="percentages" />
</div></code>

Maintenant, vos saisies numériques afficheront les suffixes de type, améliorant ainsi la clarté et compréhension de l'utilisateur.

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!