Android Input-Styling mit purem CSS - Material Design Input mit Validierung

Datum:

Easy material-design inputs

Android Input-Felder sind hübsch gestaltet und leicht zu verstehen. Ich zeige euch hier Schritt für Schritt wie ihre diese Inputfelder leicht, nur in CSS, nachbauen könnt.

Material Android Design Form Input

Das Prinzip

Wir haben ein Inputfeld, und ein Label. Das Label liegt initial auf dem Inputfeld und tut so, als wäre es der Placeholder-Text, und ist absolut positioniert. Mit dem CSS Trick :not(:placeholder-shown) ~ label gibt man den als Nachbar platziertem Label ein anderes styling mit. Wie das genau funktioniert erkläre ich hier.

Das HTML

Wir erstellen uns eine Formgroup die um unser Label und um unser Input-Feld liegt.

HTML

<div class="form-group">
    <input id="name1" type="text" placeholder="Please enter something" required>
    <label for="name1">Please enter something</label>
</div>

Das CSS, die entscheidende Eigenschaft :placeholder-shown

CSS

/* position relative, weil das label absolut positioniert wird */
.form-group {
  position: relative;
}

/* Das Label absolut positionieren */
label {
  position: absolute;
  /* Mittig in das Inputfeld */
  top: 50%;
  left: 1rem;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}
/* Den echten Placeholder zeigen wir an, aber die Schriftfarbe ist transparent, 
so können wir per CSS feststellen, ob der Browser aktuell einen Placeholder anzeigt 
oder nicht. Das ist für die CSS Regel des Labels wichtig */
input::-webkit-input-placeholder {
  color: transparent;
}
/* Jetzt das entscheidende, die Eigenschaft :placeholder-shown können wir benutzen, 
um zu triggern, wann das Label im Inputfeld stehen soll, und wann es über dem Feld 
stehen muss, um nicht mit der Eingeabe zu kollidieren */
/* Wenn der Placeholdertext nicht angezeigt wird, überschreiben wir die Position des Labels, 
und setzen es über das Inputfeld */
input:not(:placeholder-shown) ~ label {
  top: -1em;
  left: 0;
  font-size: 75%;
}

Das war im Grunde die ganze Magic. Einfach wenn mans verstanden hat oder?

Wie ist der Browsersupport von :placeholder-shown, kann der Internet Explorer :placeholder-shown?

Leider kann weder der Internet-Explorer noch die anderen Microsoft-Produkte wie Microsoft Edge aktuell den CSS Pseudoselektor :placeholder-shown. Richtige Browser hingegen schon.

Hier noch ein Beispiel auf CodePen, mit CSS und HTML Validierung der Inputfelder

https://codepen.io/ingomc/pen/yvVyLg

Fazit - Warum sollte man mit purem CSS Animationen und Styling erstellen?

Die Performance und Einfachheit sprechen für sich, da hier nichts zustätzlich berechnet werden muss. Allerdings möchte Microsoft hier wieder mal sein eigenes Ding machen, so dass man wenn man alle Nutzer erreich will, wieder einen Fallback für den Internet Explorer und Microsoft Edge einbauen muss.

Navigation