Heim  >  Artikel  >  Web-Frontend  >  Wie formatiere ich ein einzelnes Eingabefeld als partitionierte Eingaben?

Wie formatiere ich ein einzelnes Eingabefeld als partitionierte Eingaben?

Susan Sarandon
Susan SarandonOriginal
2024-11-01 02:27:02416Durchsuche

How to Style a Single Input Field as Partitioned Inputs?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Ist CSS Turing vollständig?Nächster Artikel:Ist CSS Turing vollständig?