Comment ajouter des suffixes d'unité aux champs de saisie numérique avec CSS ?-tutoriel CSS-php.cn

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

DDD

Libérer： 2024-10-25 17:05:02

original

377 Les gens l'ont consulté

How to Add Unit Suffixes to Number Input Fields with CSS?

Comment ajouter des suffixes de texte aux champs de saisie numérique

Pour fournir aux utilisateurs plus de clarté sur les valeurs attendues dans divers champs de saisie, vous pouvez ajouter suffixes indiquant les unités de mesure. Voici comment procéder en HTML et CSS :

Envelopper les entrées dans un Div

Entourez chaque élément d'entrée dans un

pour créer un wrapper. Cela permettra de positionner l'unité en tant que pseudo-élément à côté du champ de saisie.

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>

Copier après la connexion

<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>

Copier après la connexion

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!