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.