HTML5 'search' input type für Webkit-Browser stylen

Der HTML5-Standard bringt uns u.a. einige Neuerungen im Bereich der Formulare. Dazu gehören einige neue Typen für Input-Felder. Eines davon sind Suchfelder, die den type="search" erhalten.

Die Suchfelder bringen im Vergleich zu einem normalen Textfeld eigentlich keine Vorteile. Der einzige Unterschied besteht eigentlich in der Semantik, dass man es explizit als Suchfeld auszeichnet. Ein weiterer Vorteil ist, dass man damit auch in den Stylesheets die Möglichkeit erhält, ein Suchfeld individuell zu gestalten, ohne dem Element ein entsprechendes class-Attribut verpassen zu müssen.

Aber gerade beim CSS-Styling des Suchfeldes erlebt man sein blaues Wunder. Während sowohl Firefox als auch Opera und Internet Explorer (zumindest IE9) wie erwartet reagieren und den CSS-Anweisungen Folge leisten, zeigen sich die beiden Webkit-Browser Chrome und Safari sehr widerspenstig und weichen nicht vom Browser Default Style ab.

Auf dieses Phänomen weist auch Peter Kröner in seinem Buch "HTML5" hin:

Der einzige Unterschied zwischen den beiden Typen ist, dass auf Plattformen, auf denen Suchformulare normalerweise anders aussehen als einfache Textfelder, auch der Browser diesen Unterschieden Rechnung tragen kann. In Webkit-Browsern unter OS X geht dieses 'Rechnung tragen' schon so weit, dass er dort sämtliche CSS-Wünsche seitens des Webworkers ignoriert werden, um ja nicht zu riskieren, dass das Feld anders aussehen könnte als andere Suchfelder im Betriebssystem.

... und dennoch gibt es eine Möglichkeit zur Zähmung

Folgender mit Webkit Vendor-Prefixes gespickter CSS-Code führt einen Reset durch und ermöglicht individuelles Styling des Suchfeldes für Chrome und Safari:

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}

Ein besonderer Dank ergeht an den Webdesigner Priyank Sharma, der in diesem Blogpost die Lösung des Problems beschrieben hat. Dort beschreibt er auch detailliert, was die einzelnen Anweisungen bewirken.

PS: passend zum Thema widmet auch Peter Kröner dem Sinn und Style des Search-Inputs einen Blogartikel.