"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment styliser un champ de saisie unique en tant qu'entrées partitionnées ?

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

Publié le 2024-11-05
Parcourir:647

How to Style a Single Input Field as Partitioned Inputs?

Style d'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é :

#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;
}

Implémentation HTML

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

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3