Ein Eingabefeld als partitionierte Eingaben gestalten

Es gibt zahlreiche Methoden zum Erstellen einer Reihe partitionierter Eingabefelder. Eine Methode nutzt den „Buchstabenabstand“, um Zeichen innerhalb eines einzelnen Eingabefelds zu trennen. Darüber hinaus können die Stile „Hintergrundbild“ und „Rahmen unten“ die Illusion mehrerer Eingabefelder weiter verstärken.

CSS-Snippet

Der folgende CSS-Code zeigt, wie um den gewünschten Effekt zu erzielen:

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

HTML-Implementierung

Um dieses CSS zu verwenden, fügen Sie einfach den folgenden HTML-Code zu Ihrer Seite hinzu: