Float Labels mit CSS

Dieses Muster hast du wahrscheinlich schon oft gesehen. Es ist ein Eingabefeld, das aussieht, als hätte es Platzhaltertext, aber wenn du darauf klickst/tippst, verschwindet dieser Text und du kannst dort tippen. Ich finde das ziemlich clever. Brad Frost hat einen wirklich guten Beitrag dazu, in dem die Vor- und Nachteile usw. detailliert beschrieben werden.

Viele der Demos, die ich gesehen habe, beinhalten JavaScript. Neulich habe ich beim Auschecken bei Nest.com deren Technik dafür gesehen und mir eine Möglichkeit überlegt, wie ich das ohne JavaScript umsetzen könnte. Also hier sind wir.

So sieht die Nest.com-Version aus

Und hier ist mein Ansatz

Es ist nicht ganz so schick wie die Nest-Versionen, bei denen der Text ausblendet, während das Label hochgleitet. Sicherlich mit etwas JavaScript möglich, aber wir bleiben hier bei reinem CSS. Könnte aber trotzdem möglich sein. Diese Herausforderung überlasse ich dir.

Einige schnelle Erinnerungen

Es gibt zwei Gründe, warum du dies in Betracht ziehen könntest

1. Es könnte Platz sparen. Da Eingabefeld und Label kombiniert sind, nimmt es weniger Platz ein. Wenn ein Eingabefeld im Fokus ist, musst du immer noch sowohl das Label als auch das Eingabefeld anzeigen, aber du kannst diesen Platz entweder nutzen, indem du einen Teil des bereits genutzten Platzes verwendest, oder indem du den Bereich vorübergehend nur für das fokussierte Eingabefeld vergrößerst.
2. Es macht das Eingabefeld zu einem großen Button. Nicht, dass Eingabefelder nicht schon wären, und nicht, dass Labels es nicht wären, wenn sie ein richtiges for-Attribut haben, aber es hat etwas Schönes an einem großen Rechteck, das dir sagt, was es will, und das du anklickst/antippst. Könnte besonders auf Mobilgeräten ein schönes Erlebnis sein.

Ich würde sagen, im Allgemeinen sind immer sichtbare Labels wahrscheinlich "besser" – aber das ist eine clevere Idee und richtig gemacht, gelegentlich nützlich. Es besteht immer das Risiko, dies zu vermasseln und die Zugänglichkeit zu beeinträchtigen, also sei vorsichtig. Ein Nachteil dieses Musters: Wir können placeholder nicht zusätzlich zum Label verwenden, was hilfreich sein kann (z. B. ein Label "Telefonnummer" und ein Platzhalterhinweis "(555) 555-5555").

Der Trick (1 von 3) – Das Label ist der Platzhalter

Es gibt ein <div>, das sowohl das <label> als auch das <input> enthält (was du sowieso tun musst, da Eingabefelder in Formularen in Block-Level-Elementen sein müssen), das relativ positioniert ist. Das ermöglicht eine absolute Positionierung darin, was bedeutet, dass wir das Label und das Eingabefeld übereinander positionieren können. Wenn wir das Eingabefeld oben platzieren, aber mit einem transparenten Hintergrund, kannst du das Label direkt darunter sehen und trotzdem darauf klicken.

<div>
  <input id="name" name="name" type="text" required>
  <label for="name">Your Name</label>
</div>

form > div {
  position: relative;
}
form > div > label {
  position: absolute;
}

Der Trick (2 von 3) – Der :focus-Zustand und der benachbarte Geschwisterselektor

Die Quellreihenfolge von <label> und <input> wäre hier nicht sehr wichtig, da sie semantisch mit dem for-Attribut verbunden sind. Aber wenn wir das Eingabefeld zuerst platzieren, können wir seinen :focus-Zustand und einen benachbarten Geschwisterselektor (+) nutzen, um das Label zu beeinflussen, wenn es fokussiert ist. Ähnlich im Konzept wie der Checkbox-Hack.

input:focus + label {
  /* do something with the label */
}

Mit dem Label kannst du machen, was du willst. Finde einfach einen coolen Platz, um es zu verschieben und zu stylen, damit es beim Tippen im Eingabefeld nicht stört. Mein Beispiel hatte zwei Möglichkeiten: eine war, es kleiner zu machen und zum unteren Rand des Eingabefelds zu verschieben, die andere war, es zur rechten Seite zu bewegen.

form.go-bottom label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
}
form.go-bottom input:focus + label
  top: 100%;
  margin-top: -16px;
}

Der Trick (3 von 3) – der :valid-Zustand

Sobald das Eingabefeld tatsächlichen Text enthält und wieder aus dem Fokus gerät, wäre es sehr seltsam (schlecht), wenn Label und Eingabetext übereinander liegen. Glücklicherweise gibt es in CSS einen :valid-Selektor, der auf Eingabefelder funktioniert, wenn sie sich in einem gültigen Zustand befinden. Dieser gültige Zustand kann "beliebiger Text" sein, vorausgesetzt, das Einzige, was ihn gültig macht, ist das Vorhandensein eines beliebigen Wertes, was wie folgt erreicht werden kann:

<input type="text" required>

Denk daran, dass du das Label überhaupt nur sehen konntest, weil das Eingabefeld einen transparenten Hintergrund hatte. Um es zu verbergen, können wir stattdessen einen undurchsichtigen Hintergrund verwenden

form input:valid {
  background: white;
}

Der Rest ist nur Feinarbeit an Design-Details, bis du es so hast, wie du es möchtest.

Mehr

Die Idee stammt ursprünglich von Matt D. Smith, mit diesem Design

• Denke daran, Brad Frosts Artikel zu lesen, der die Vor- und Nachteile gut behandelt.
• Einige Leute haben dies mit JavaScript angegangen: Jeremy Fields, Jim Nielsen und maman
• Als ich nach Links suchte, um sie hier einzufügen, entdeckte ich, dass David Bushell ziemlich genau das getan hat, was ich hier getan habe.
• Hier ist eine Sammlung von Float Label Beispielen auf CodePen.

Update 2018 – Verwendung von :placeholder-shown

Der Selektor :placeholder-shown existierte nicht, als dieser Artikel ursprünglich geschrieben wurde. Emil Björklund beleuchtet das Thema neu, da er jetzt existiert.