Heute hatte ich das Vergnügen ein Suchfeld zu optimieren. Nachdem die Firefox-Klippe umschifft war machte ich mich an die Darstellungsgrenzen des Suchfeldes im mobilen Safari. Bisher nahm ich immer (kleine) Hintergrundbilder zu Hilfe um die Schattierungen des Suchfeldes und Farbverläufe des Suchbuttons zu überwinden.
Hintergrundbilder werden durch die Verwendung der appearance-Eigenschaft jedoch obsolet. Die Eigenschaft wird in zwei Fällen eingesetzt:
- um plattformspezifisches Aussehen zuzuweisen
- um plattformspezifisches Aussehen zu entfernen
Bei den Suchfeldern wollen wir das Aussehen, welches ihnen von Seiten der iOS-Entwickler zugedacht wurde, entfernen. Dazu kann folgende Zeile verwendet werden:
-webkit-appearance:none;
Sollen nur die inneren Schatten des Eingabefeldes entfernt werden, hilft folgende Zeile:
-webkit-appearance:caret;
Sollen darüber hinaus noch die Rundungen der Ecken zurückgesetzt werden, kann ergänzend zu oben genannten Zeilen der border-radius auf 0 gesetzt werden.
Hier noch zwei Links zu den Artikeln auf die ich mich hier beziehe, und die darüber hinaus auch die appearance-Eigenschaft der Mozilla-Browser behandeln: