Floating-Label-Input

Vorschau

Benutzername

Anwendungsfälle und Funktionen

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.

Design- und UX-Punkte

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.

So passen Sie es an

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.

Implementierungscode

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

Browserkompatibilitätsstatus

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.