Wenn ich auf meinen HTML5-Seminaren die neuen Formularelemente vorstelle, währt die allgemeine Begeisterung in der Regel exakt so lange, bis einer fragt, wie man die tollen neuen Dinger denn gestalten könnte. Denn das ist praktisch nicht möglich. Nimmt man etwa einen Datumspicker, wie er uns in Opera dargestellt wird, und verpasst ihm via CSS einen roten Hintergrund, so ist das Ergebnis etwas unbefriedigend:

HTML5-Datumspicker + CSS = Desaster

Zwar ist das nicht im engeren Sinne falsch (ein roter Hintergrund ist ja vorhanden), aber auch nicht wirklich hilfreich – die Sonntage sind unsichtbar und die Buttons noch ohne jedes Design. Das Interface des Datumspickers ist einfach eine zu komplexe Konstruktion, als dass man ihr durch so einfache Anweisungen wie „roter Hintergrund“ gerecht werden könnte. Unter der Haube baut der Browser den Datumspicker aus HTML zusammen, so genanntem Shadow DOM, das gegen Stylingmaßnahmen von außen abgeschirmt ist. Theoretisch könnten es uns die Browserhersteller durch Pseudoelemente ermöglichen, die Einzelteile des Datumspickers zu gestalten, doch auch auch dann würde sich der Vorgang zwischen den verschiedenen Browsern extrem unterscheiden. Bei praktischer Betrachtungsweise muss man also sagen: die neuen Formularelemente von HTML5 lassen sich kaum bis gar nicht gestalten.

Der Grund hierfür ist einfach: der Standard legt überhaupt nicht fest, wie die neuen Formularelemente auszusehen haben. So verlieren die Spezifikationen z.B. über die Natur des <input type="date"> nicht mehr als die folgenden Worte:

The input element represents a control for setting the element's value to a string representing a specific date.

Das ist ein Freibrief für die Browserhersteller, ihr Eingabefeld so zu gestalten wie es ihnen gerade passt. Daraus folgen die unterschiedlichsten Umsetzungen der Browser und die praktisch nicht gegebenen Gestaltungsmöglichkeiten. Und das ist kein Versehen, sondern durchaus ein Feature, denn wie ein ein Eingabefeld idealerweise auszusehen hat, ist von dem Kontext abhängig, in dem es verwendet wird. So sportet das Number-Input in Desktopbrowsern in aller Regel zwei kleine Buttons zum hoch- und runterzählen:

Number-Input in einem Desktopbrowser

Das ist eine absolut sinnvolle Umsetzung eine solchen Zahlen-Eingabefeldes, doch es sind durchaus Umstände denkbar, unter denen andere Gestaltungsansätze besser wären. Das gleiche Zahlen-Eingabefeld sieht in einem iPhone so aus:

Number-Input von HTML5 im iPhone-Browser

Das Eingabefeld sieht aus wie jedes andere Feld auch; die Umsetzung des Elements erfolgt ausschließlich über die Bildschirmtastatur. Denn mit den winzigen Buttons zum hoch- und runterzählen möchte man sich in einem Touch-Interface sicher nicht herumschlagen und sich die Möglichkeiten einer angepassten Bildschirmtastatur entgehen zu lassen wäre nicht sonderlich clever. So geht der iPhone-Browser seinen eigenen Weg, den er aber auch nur gehen kann, weil eben die Spezifikationen die genaue Umsetzung der neuen HTML5-Formularelemente offenlassen. Dass dabei die Gestaltungsfreiheit leidet, ist eine unschöne, aber wohl nicht vermeidbare Nebenwirkung.