WebKit HTML5 Suche Eingabefelder

Eines der neuen Eingabetypen in HTML5 ist search.

<input type=search name=s>

In den meisten Browsern tut es absolut nichts. Es verhält sich einfach wie ein Textfeld. Das ist kein Problem. Die Spezifikation verlangt nicht, dass es etwas Besonderes tut. WebKit-Browser behandeln es jedoch etwas anders, hauptsächlich in Bezug auf das Styling.

Die Styling-Beschränkungen

WebKit hat erhebliche Einschränkungen bei dem, was Sie an einem Suchfeld ändern können. Ich vermute, die Idee ist Konsistenz. Insbesondere in Safari sehen Suchfelder genauso aus wie die Suchleiste oben rechts im Browser. Die folgenden CSS-Regeln werden in WebKit „egal was“ ignoriert, d. h. Sie können sich nicht einmal mit !important-Regeln dagegen wehren.

input[type=search] { 	
	padding: 30px;            /* Overridden by padding: 1px; */
	font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
	border: 5px solid black;  /* Overridden by border: 2px inset; */
	background: red;          /* Overridden by background-color: white; */
	line-height: 3;           /* Irrelevant, I guess */
}

Mit anderen Worten, seien Sie **extrem vorsichtig** bei der Verwendung von CSS-Eigenschaften für ein Suchfeld, es sei denn, Sie sind damit einverstanden, dass das Suchfeld in anderen Browsern **sehr** anders aussieht.

Erlaubtes Styling

Die folgenden CSS-Regeln funktionieren wie erwartet. Die letzten drei sollten meiner Meinung nach wie die oben genannten Eigenschaften gesperrt werden, da das Styling dieser Eigenschaften fast immer schlechter aussieht, als wenn man sie nicht hätte.

input[type=search] { 
	color: red;  
	text-align: right;
	cursor: pointer;
	display: block; 
	width: 100%; 
	letter-spacing: 4px;        
	text-shadow: 0 0 2px black;       
	word-spacing: 20px;               
}

Verhindertes Styling

Seien Sie vorsichtig bei der Verwendung von text-indent bei Suchfeldern. Die Ergebnisse sind ziemlich seltsam und inkonsistent. Hier ist ein Beispiel

Vorherige Suchanfragen anzeigen

Dies ist meines Wissens nach nirgends dokumentiert, auch nicht in der Spezifikation, aber wenn Sie einen results-Parameter zum Eingabefeld hinzufügen, wendet WebKit eine kleine Lupe mit einem Dropdown-Pfeil an, der frühere Ergebnisse anzeigt. (Danke an Mike Taylor)

<input type=search results=5 name=s>

Ich mag die kleine Lupe sehr. Sie unterstreicht die Suchfunktionalität des Feldes, aber ich halte die Funktionalität selbst für ziemlich mickrig. Beim Neuladen der Seite werden die letzten Suchanfragen gelöscht, sodass dieses Dropdown fast immer „Keine letzten Suchanfragen“ anzeigt, es sei denn, Sie haben eine Art von Ajax-Suche implementiert (und selbst das habe ich nicht wirklich getestet).

Update: Sie können den autosave-Parameter verwenden, um die Werte im Dropdown-Menü über Seitenaufrufe hinweg zu speichern.

<input type=search results=5 autosave=some_unique_value name=s>

Größenbeschränkungen

Es gibt nur drei verschiedene „Größen“, die WebKit-Suchfelder haben können, und diese werden durch die auf ihnen deklarierte Schriftgröße bestimmt.

Ergebnisgröße	CSS Schriftgröße
Klein	<= 10px
Mittel	11px – 15px
Groß	>= 16px

Dieses Klein-, Mittel- und Groß-Geschäft kann äußerst frustrierend sein, da selbst bei identischen Schriftwerten, die minimal für einen „Schub“ erforderlich sind, Unterschiede in der Schriftgröße zwischen den Browsern zu sehen sind.

Beachten Sie das (x) auf der rechten Seite der Suchfelder auf der WebKit-Seite. Dies ist ein zusätzliches Feature dieser Suchfelder in WebKit. Wenn das Eingabefeld einen Wert hat (kein Platzhalter, ein echter Wert), wird das (x) angezeigt, was eine funktionale UI-Steuerung zum Löschen des Eingabefeldes ist.

Apropos Platzhaltertext: Suchfelder sind dafür ein hervorragender Kandidat.

<input type=search results=5 placeholder=Search... name=s>

Und falls hellgrau nicht Ihr Geschmack ist, können Sie den Platzhaltertext stylen

::-webkit-input-placeholder {
  color: orangered;
}

Demo ansehen

Styling von grafischen Such-Widgets

Zum Beispiel der kleine (x)-Button, der angezeigt wird, wenn Sie Text in ein Suchfeld eingegeben haben. Dieser kann gestylt werden, indem zuerst die -webkit-appearance auf das spezielle Pseudo-ähnliche Element (nennen wir es so?) entfernt und dann Ihr eigenes Styling angewendet wird.

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;
    
  /* Now your own custom styles */
  height: 10px;
  width: 10px;
  background: red;
  /* Will place small red box on the right of input (positioning carries over) */

}

Spezielle JavaScript-Ereignisse bei Suchfeldern

Ich werde dies aktualisieren, sobald ich mehr Informationen habe, aber vorerst habe ich diesen Kommentar auf Ajaxian von „maccman“ gesehen

Es gibt auch einige benutzerdefinierte Ereignisse – wie z. B. 'search', das ausgelöst wird, wenn der Benutzer mit dem Tippen aufhört (stellen Sie 'incremental' auf true).