input[type="search"]: Eine Frage des Aussehens

Verblüffenderweise Ärgerlicherweise ignorieren WebKit-Browser CSS-Angaben zu border oder background, wenn es um den neuen HTML5-Datentyp input[type="search"] geht.

Wie diese designtechnische Beschränkung umgangen werden kann, habe ich bereits bei Herrn Scholz angemerkt und in den Kommentaren der Technikwürze 169 ebenfalls:

input[type="search"] {
	-webkit-appearance: none;
}

Die Lupe und das bei der Eingabe erscheinende Kreuz bleiben, allerdings kann man das Suchfeld jetzt – frisch, fromm, fröhlich, frei – seinen eigenen Bedürfnissen anpassen. Herrlich! Zum ultimativen Beweis, ein Vorher-Nachher-Vergleich des Suchformulars dieser Website in Chrome 6 unter Mac OS X:

Screenshot einzelner Suchzustände
Links die Suche ohne obigem CSS-Code, rechts mit. Jeweils im normalen und im fokussierten Zustand.