Comment ajouter un suffixe de texte à un champ à l'aide de CSS ?

Champ Vous utilisez CSS ? " /> Champ Vous utilisez CSS ? " />

Ajouter un suffixe de texte à

Cette question tourne autour de la nécessité d'ajouter un suffixe de texte aux champs de saisie de type "number" pour indiquer les unités représentées par la valeur d'entrée. Bien que cela ne puisse pas être réalisé directement avec CSS, il existe une solution de contournement intelligente utilisant un élément wrapper et le pseudo-élément ::after.

Concept :

• Enveloppez chaque champ de saisie dans un élément
  .
• Utilisez le pseudo-élément ::after positionné de manière absolue dans le champ
  le suffixe d'unité.
• Positionnez le suffixe d'unité à droite du champ de saisie à l'aide de margin ou padding.
• Modifiez le contenu du pseudo-élément ::after pour afficher le suffixe d'unité souhaité, par exemple, « ms » pour millisecondes.

Mise en œuvre :

<code class="css">/* Wrapper element styling */
div {
  display: inline-block;
  position: relative;
}

/* Unit suffix position */
div::after {
  position: absolute;
  right: 1em;  /* Adjust as needed */
}

/* Example unit suffixes */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'dB';
}
.percent::after {
  content: '%';
}</code>

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

Avantages :

• Permet une indication claire et concise de l'unité sans modifier l'élément d'entrée lui-même.
• Solution simple et compatible avec tous les navigateurs.

Limitations :

• Assurez-vous que la valeur saisie ne dépasse pas la largeur du champ de texte pour éviter que le suffixe de l'unité ne se chevauche.

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!