WebKit HTML5 搜索输入

HTML5 中的一种新型输入类型是 search。

<input type=search name=s>

在大多数浏览器中，它没有任何作用。 它只是像文本输入一样工作。 这不是问题。 规范不要求它执行任何特殊操作。 然而，WebKit 浏览器确实以略有不同的方式处理它，主要是通过样式。

样式限制

WebKit 对您可以在搜索输入上更改的内容有很大的限制。 我想，这样做的目的是为了保持一致性。 特别是在 Safari 中，搜索字段看起来与浏览器右上角的搜索框完全一样。 以下 CSS 将在 WebKit 中被忽略，无论如何，即使使用 !important 规则也无法阻止它。

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 */
}

换句话说，**请务必谨慎**在搜索输入上使用任何这些 CSS 属性，除非您愿意在其他浏览器中看到搜索输入看起来**非常**不同。

允许的样式

以下 CSS 按预期工作。 我认为，最后三个属性可能应该像上面的属性一样被锁定，因为对这些属性进行样式设置几乎总是比不设置样式看起来更糟糕。

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;               
}

无效的样式

小心不要在搜索输入上使用 text-indent。 结果非常奇怪且不一致。 以下是一个例子

显示以前的搜索

据我所知，这一点在任何地方都没有记录，也不在规范中，但如果您在输入上添加一个 results 参数，WebKit 将应用一个带有下拉箭头的小放大镜，以显示以前的搜索结果。 （感谢 Mike Taylor）。

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

我真的很喜欢这个小放大镜。 它突出了该字段的搜索功能，但我认为这个功能本身相当不稳定。 在页面重新加载时，最近的搜索将被清除，因此该下拉菜单几乎总是显示“没有最近的搜索”，除非您已实现某种 Ajax 搜索（甚至我还没有真正测试过）。

更新：您可以使用 autosave 参数来跨页面加载持久保存下拉菜单中的值。

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

大小限制

WebKit 搜索输入只有三种不同的“大小”，它由您在它们上面声明的字体大小决定。

结果大小	CSS 字体大小
小	<= 10px
中	11px – 15px
大	>= 16px

这种小、中、大模式非常令人沮丧，因为即使设置相同的字体值，即使是最小的“调整”，您也会在不同浏览器中看到字体大小差异。

注意 WebKit 侧搜索输入右侧的 (x)。 这是 WebKit 中这些搜索输入的附加功能。 如果输入有任何值（不是占位符，而是真实值），则将显示 (x)，它是一个用于清除输入的功能性 UI 控件。

说到占位符文本，搜索输入非常适合使用它。

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

如果您不喜欢浅灰色，可以为占位符文本设置样式

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

查看演示

设置搜索图形小部件的样式

例如，当您在搜索输入中输入文本时显示的小 (x) 按钮。 可以通过首先删除特殊伪元素（我们应该称它们为伪元素吗？）上的 -webkit-appearance，然后应用您自己的样式来设置它的样式。

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) */

}

搜索输入上的特殊 JavaScript 事件

当我了解更多信息时会更新它，但现在，我在 Ajaxian 上看到来自“maccman”的这条评论

还有一些自定义事件，例如“search”，它在用户暂停键入时触发（将“incremental”设置为 true）。