Comment styliser un champ de saisie unique en tant qu'entrées partitionnées ?

Styliser un champ de saisie en tant qu'entrées partitionnées

De nombreuses méthodes existent pour créer une série de champs de saisie partitionnés. Une méthode utilise « l’espacement des lettres » pour séparer les caractères dans un seul champ de saisie. De plus, les styles « image d'arrière-plan » et « bordure inférieure » peuvent améliorer encore l'illusion de plusieurs champs de saisie.

Extrait CSS

Le code CSS suivant montre comment pour créer l'effet souhaité :

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

Implémentation HTML

Pour utiliser ce CSS, ajoutez simplement le code HTML suivant à votre page :

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