如何使用 -webkit-appearance: searchfield-results-decoration？答案

【问题标题】：How to use -webkit-appearance: searchfield-results-decoration?如何使用 -webkit-appearance: searchfield-results-decoration？
【发布时间】：2010-12-29 21:10:21
【问题描述】：

祝大家节日快乐。当我得到这个答案时，我可能会觉得很傻，但我想知道如何使用 CSS“-webkit-appearance:searchfield-results-decoration”规则在搜索框内绘制一个小放大镜.

我想创建一个类似于 apple.com 右上角的搜索框。它应该有圆角、放大镜图标和用户开始输入时出现的取消/清除按钮。我可以通过

<input type="search" />

但这缺少放大镜图标。我也知道我可以使用“-webkit-appearance:searchfield”设置输入元素的样式，但这似乎只是使圆角没有正确的左/右填充、图标或取消按钮。

我只关心这个在 Webkit 中的工作，因为它将在 Cocoa WebView 中使用。我不需要 IE、Firefox、Opera 等的标记。

【问题讨论】：

标签： css html webkit

【解决方案1】：

要获得放大镜，您需要在搜索中添加resutls="0"。如果您将结果设置为更大的值，例如results="5"，放大镜将变成一个下拉菜单，可用于选择以前使用的搜索词。如果您不想使用单独的标签，而是使用焦点控件时消失的占位符，也可以添加占位符文本。

<input type="search" results="0" placeholder="Search">

【讨论】：

我仍然不知道如何使用那些 -webkit-appearance 规则，但这让我找到了我正在寻找的搜索框。谢谢。

【解决方案2】：

我不知道 Webkit 特定的 CSS，但在普通 CSS 中，背景图像会这样工作：

style="background-image: url(glass.gif); 
       background-repeat: no-repeat; 
       background-position: left center;
       padding-left: 16px"

“取消”按钮，如果没有针对此的 Webkit 特定命令，则需要 Javascript。您可以使用 "position: relative; left: -16px" 将按钮放置在输入字段旁边，然后将其向左移动以使其浮动在输入字段上。

【讨论】：