Wie erstelle ich ein cooles Feld für Passwörter?

Diese Art Eingabefelder sieht man immer wieder, vorallem in Apps oder grossen Webseiten ist das keine Seltenheit. Anstatt dass man ein einfaches Input Feld verwendet, habe ich hier mehrere genommen und diese nebeneinander angeordnet. Jetzt sieht es wieder aus wie ein Feld, aber man kann nun sehr schöne Eingaben machen. Natürlich muss es nicht nur für Passwörter seine, sondern kann auch für andere Elemente verwendet werden.

Heute zeige ich euch wie ihr nur mit HTML und CSS sowas erstellen könnt.

Auch wenn es sehr kompliziert aussieht, es ist eigentlich ganz einfach und schnell gemacht und in meinen Augen sieht es einfach hammermässig aus.

Video

HTML

<div class="passwort">
      <input
        maxlength="1"
        placeholder="9"
        class="input"
        name="feld1"
        type="text"
      />
      <input
        maxlength="1"
        placeholder="8"
        class="input"
        name="feld2"
        type="text"
      />
      <input
        maxlength="1"
        placeholder="7"
        class="input"
        name="feld3"
        type="text"
      />
      <input
        maxlength="1"
        placeholder="6"
        class="input"
        name="feld4"
        type="text"
      />
      <input
        maxlength="1"
        placeholder="5"
        class="input"
        name="feld5"
        type="text"
      />
      <input
        maxlength="1"
        placeholder="4"
        class="input"
        name="feld6"
        type="text"
      />
    </div>

CSS

:root {
  --bg: #292929;
  --schrift: #fff;
  --unterstrich: #fff71c;
  --focus: #ff2a17;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.passwort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.passwort input {
  width: 40px;
  height: 50px;
  text-align: center;
  background-color: transparent;
  border: none;
  border-bottom: solid 3px var(--unterstrich);
  font-size: 30px;
  color: var(--schrift);
  outline: none;
}

.passwort input:focus {
  border-bottom: solid 3px var(--focus);
}