Comment ajouter des suffixes d'unité aux champs de saisie numérique avec CSS ?

Positionnez le texte de l'unité

À l'aide du pseudo-élément ::after, vous pouvez placer le texte unitaire à droite du wrapper. Définissez le positionnement absolu avec les propriétés haut et droite pour contrôler son emplacement.

Gérer le survol et la mise au point

Pour tenir compte des flèches qui apparaissent au survol ou au focus, ajustez la droite propriété en conséquence pour déplacer le texte de l'unité plus à gauche. Vous pouvez également gérer des navigateurs comme Firefox, où les flèches sont toujours affichées.

Définir les abréviations des unités

Créer des classes pour chaque unité (par exemple, ms, db, pourcentage) et attribuez les abréviations appropriées comme contenu pour le pseudo-élément ::after. Cela affichera les unités désignées à côté des champs de saisie.

Exemple de mise en œuvre

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

/* Unit positioning */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* Hover/focus adjustments */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Firefox handling */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Unit abbreviations */
.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>

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!