Comment créer un champ de saisie OTP partitionné à l'aide du style Bootstrap ?

Isolation des champs de saisie avec des techniques de style

L'objectif est de concevoir une interface utilisateur similaire à celle représentée dans l'image fournie, où un L'OTP à quatre chiffres peut être saisi dans des champs discrets. Alors que les méthodes conventionnelles impliquent la création de quatre champs de saisie distincts, il peut exister une approche alternative de style pour y parvenir.

Bootstrap à la rescousse

Le framework Bootstrap offre une solution de style qui transforme un seul champ de saisie en un champ partitionné, lui donnant l'apparence de plusieurs entrées. Voici comment l'utiliser :

1. Ajuster l'espacement des caractères : Augmentez l'espacement des caractères pour séparer visuellement les chiffres.
2. Stylisez la bordure inférieure : Créez une bordure inférieure en pointillés ou en tirets pour simuler des champs séparés.
3. Voici l'extrait de code

<code class="css">#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline : none;
}</code>

<code class="html"><input id="partitioned" type="text" maxlength="4" /></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!