Wie formatiere ich ein einzelnes Eingabefeld als partitionierte Eingaben?

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 „Rand unten“ die Illusion mehrerer Eingabefelder weiter verstärken.

CSS-Snippet

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

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

HTML-Implementierung

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

<code class="html"><input id="partitioned" type="text" maxlength="4" /></code>

Das obige ist der detaillierte Inhalt vonWie formatiere ich ein einzelnes Eingabefeld als partitionierte Eingaben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!