Webkit CSS-Attribute

From macwrench
Jump to navigation Jump to search

Apples auf kHML basierender Webbrowser bietet (abgesehen von der Mangelhaften Unterstützung, Formularelemente mit CSS zu gestalten) so einige nette Besonderheiten:

focus rings

Safaris mitunter recht lästigen blauen focus-ring in input-Feldern kann man mit folgenden CSS-Attributen anpassen:

outline: none;

Mit folgendem Attribut lässt sich die Farbe anpassen:

-webkit-focus-ring-color:#123456;

Mehr Informationen dazu gibts bei Apple:

Formulare

Größenänderungen von Textareas

... lassen sich über das folgende Attribut verhindern:

resize: none;

Such-Feld

Für die INPUT Felder von Formularen existiert für Safari ab Version 1.3 (für OS 10.3) und 2.0 (für OS 10.4) der typ search, der - wer hätte es gedacht - ein Suchfeld darstellt. Die Syntax dafür ist

<input type="search">

Das ist leider nicht sonderlich umfangreich per CSS zu gestalten, ein paar Attribute gibt es jedoch dazu:

incremental

beeinflusst, ob dieSuche bereits während der Eingabe gestartet werden soll.

placeholder

erlaubt die Definition eines leicht ausgegrauten Platzhalter-Textes, der verschwindet, sobald das Feld aktiv ist (also den Focus hat).

autosave

erlaubt die Angabe eines Namens, unter dem die Suchergebnisse des Dropdown-Feldes erreichbar bleiben. Diese Angabe ist global gültig, d.h. über mehrere Webseiten hinweg nutzbar (z.B. für die Verwendung von bisherigen Google-Suchen in eigenen Suchfeldern).

results attribute

erlaubt es, die Anzahl der im dropdown-Feld auszugebenden Ergebnisse festzulegen.

zusätzlich

sind die bisher bekannten Attribute wie z.B. read-only oder maxlength verwendbar.

Die ganze Sache sieht dann etwa so aus:

Safari HTML Searchfield.gif

In anderen Browsern wird stattdessen lediglich ein normales Textfeld angezeigt, Aus dieser Richtung sollte also keine Gefahr drohen.