Maison > interface Web > tutoriel CSS > le corps du texte

Comment ajouter des suffixes de texte aux entrées numériques pour une différenciation visuelle ?

DDD
Libérer: 2024-10-29 20:16:30
original
351 Les gens l'ont consulté

How to Add Text Suffixes to Number Inputs for Visual Differentiation?

Ajout de suffixes de texte aux entrées numériques

Dans un scénario typique, les entrées numériques telles que transmettre une valeur en millisecondes. Cependant, avec plusieurs entrées numériques indiquant des valeurs en dB ou en pourcentages, il devient nécessaire de différencier ces valeurs visuellement. L'ajout d'un suffixe de texte clarifie le type de valeur représentée.

Solution :

Utiliser un wrapper

et positionnez l'unité comme pseudo-élément ::after avec le texte de l'unité souhaité.

Mise en œuvre :

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

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

/* Adjust unit position on hover and focus */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Override for Firefox (arrows always shown) */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Specify abbreviation for each unit class */
.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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!