Floating Labels sind eine moderne, platzsparende Benutzeroberfläche für Eingabeformulare, die häufig in Material Design und anderen Anwendungen verwendet wird.
Platzsparend: Dient gleichzeitig als Etikett und Platzhalter und spart vertikalen Platz, selbst wenn die Bildschirmfläche begrenzt ist.
Klärung des Eingabeinhalts: Benutzern wird sowohl während als auch nach der Eingabe immer angezeigt, was ein Feld bedeutet (Beschriftung), sodass Benutzer nie verwirrt werden.
Ausgeklügelte Interaktionen: Eine sanft angehobene Animation des Etiketts im Fokus gibt dem Benutzer ein effektives visuelles Feedback, dass die Eingabe jetzt verfügbar ist.
Platzhalter-Hack: Verwendet die Pseudoklasse „:placeholder-shown“, um den Status (Eingabe oder nicht) nur mithilfe von CSS und ohne Verwendung von JavaScript zu bestimmen. (* placeholder=" " auf der HTML-Seite ist eine zwingende Voraussetzung)
Sichtbarkeit sicherstellen: Wenn das Etikett angehoben wird, wird die Sichtbarkeit durch Reduzieren der Schriftgröße („scale(0.75)“) und Anwenden von Fettschrift („font-weight: 500“) und Designfarbe aufrechterhalten.
Barrierefreiheit: Durch die Verknüpfung des „for“-Attributs des „label“-Elements und der „id“ des „input“-Elements werden Bildschirmleseprogramme und Fokusbewegungen beim Klicken auf die Beschriftung unterstützt. Außerdem wird „pointer-events: none“ angegeben, damit die Bezeichnung den Vorgang nicht beeinträchtigt.
Sie können die folgenden Punkte an das Designsystem Ihres Projekts anpassen.
Farbgebung: Ändern Sie die Farbe von „.fli-input:focus“ und „.fli-input:focus ~ .fli-label“ (derzeit „#6366f1“) in die Markenfarbe.
Abgerundete Ecken und Schatten: Durch Ändern von „border-radius“ und „box-shadow“ von „.fli-input“ können Sie ein flacheres Design oder ein abgerundeteres und auffälligeres Design einstellen.
Schriftgröße: Wenn Sie die Schriftgröße oder die Verkleinerungsrate („scale(0.75)“) des Etiketts anpassen, passen Sie bitte auch die „Auffüllung“ (insbesondere den oberen Wert) von „.fli-input“ fein an, damit sich das Etikett und der Eingabetext nicht überlappen.
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">Benutzername</label>
</div>
<style>
.fli-group {
position: relative;
width: 100%;
max-width: 320px;
}
.fli-input {
width: 100%;
padding: 1.5rem 1.25rem 0.5rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.fli-input:hover {
border-color: #cbd5e1;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}
.fli-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: #ffffff;
}
.fli-label {
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-size: 1rem;
color: #64748b;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
}
/* Eingabe oder abgeschlossener Status */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* Unscharf, aber trotzdem Eingabe */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>Chrome: neueste Version
Safari: neueste Version
Firefox: neueste Version
Edge: Neueste Version
Die Pseudoklasse „:placeholder-shown“ wird von allen modernen Browsern unterstützt und ist sicher zu verwenden.