Sinn und Style des Search-Inputs in HTML5

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Das in HTML5 eingeführte Search-Input (<input type="search">) ist im Prinzip ein Formularelement, das sich nur durch sein Aussehen von einem normalen Textfeld unterscheidet:

The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.

Webkit-Browser sind bei der Implementierung von Search-Inputs Vorreiter und haben die bemerkenswerte Eigenschaft, überhaupt gar kein Styling von Suchfeldern zuzulassen! Das folgende CSS resultiert nicht in einem Eingabefeld mit rotem Rahmen:

input[type=search]{
    border:2px solid red;
}

Francesco Schwarz hat nun herausgefunden, wie man diese Blockade lösen kann. Die CSS3-Eigenschaft appearance (Spezifikationen, Artikel) ermöglicht es, HTML-Elemente wie Teile des System-Interfaces zu gestalten oder eben eine solche Gestaltung auch aufzuheben. Um also ein Suchfeld mit rotem Rahmen zu versehen, muss man (zumindest bei Webkit-Browsern) appearance zurücksetzen:

input[type=search]{
    appearance:none;
    border:2px solid red;
}

Dieser Reset funktioniert zwar auch nicht perfekt (das Lupen-Icon bleibt erhalten) aber immerhin kann man so zumindest ein wenig eigenes Styling unterbringen. Aber es bleibt die Frage, warum sich überhaupt diese Mühe machen sollte.

Meiner Interpretation nach ist das Search-Input im Prinzip ein Präsentationselement wie <font> und <blink>. Einerseits kann ich schon nachvollziehen, was mit dem Element erreicht werden soll – Web- und Systeminterfaces zusammenzuführen ist ein hehres Ziel. Aber sind nicht eigentlich Gestaltungsfragen der Job von CSS? Wäre nicht so ein Suchfeld-Wie-Im-OS-Styling genau das, wofür es appearance gibt? Den Webkit-Entwicklern kann man aus dem absonderlichen Styling-Verhalten des Search-Inputs auch keinen Strick drehen, da es nicht so aussieht, als sei irgendwo genauer spezifiziert, wie genau sich denn das Element verhalten soll. Die ganz am Anfang des Artikels zitierte Passage ist alles, was die HTML5-Spezifikationen zum Search-Input zu sagen haben.

Und so bin ich bin bisher noch kein Fan von <input type="search"> geworden. Schwammig spezifizierte Präsentationselemente sollten eigentlich den HTML-Friedhof bevölkern und nicht in HTML5 herumgeistern.

Ergänzung: Eric Eggert zwitscherte mir gerade, dass man bei Apple mit dem Search-Input tatsächlich sogar noch mehr macht als den Style zu verbiegen. Eine Reihe von zusätzlichen HTML-Attributen rüstet Funktionen aus den Suchboxen des Mac-Betriebssystems nach, was dem Search-Input durchaus Sinn verleiht. An der Kritik an den HTML5-Spezifikationen ändert der Alleingang eines Browserherstellers (mag er noch so sinnstiftend sein) aber natürlich nichts.

Kommentare (4)

  1. Thomas

    1. Juli 2010, 13:38 Uhr

    Ich finde das Suchfeld schon Sinnvoll. Browser könnten das Suchfeld der aktuellen Seite zum Beispiel automatisch in die Suchleiste integrieren und auswählen (statt z.B. Google-Suche).
    Smartphones blenden beim Suchfeld auf der On-Screen-Tastatur eine Lupe zum Suche starten ein was das Formular abschickt, statt ein "weiter" bei anderen Elementen, welches normalerweise zum nächsten Formular-Element wechselt.

    Sogesehen ist es also schon mehr als ein reines Präsentationselement.

    Weniger Sinnvoll finde ich, dass die Browser das Stylen mehr oder weniger vollständig verbieten (und Designer damit zu javascript-Lösungen zwingen)...

  2. Peter

    1. Juli 2010, 13:40 Uhr

    Sollten die Browser so etwas wirklich machen auch wenn es nicht in den Spezifikationen steht?

  3. Thomas

    1. Juli 2010, 14:00 Uhr

    Zitat Peter:

    Sollten die Browser so etwas wirklich machen auch wenn es nicht in den Spezifikationen steht?

    Was nicht ist kann ja noch werden ;)
    Streng nach der Spezifikation wäre das - wie du sagtest - tatsächlich nur ein stilistisches Element, was man auch mit einem type="text" und einfachstem CSS erreichen könnte...

  4. Thomas Scholz

    1. Juli 2010, 14:37 Uhr

    Darf ich hier mal ganz frech meinen Artikel Suchformular in HTML5 erwähnen? Da gibt es auch eine Diskussion der zusätzlichen Attribute.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon