如何使用-webkit-外观:searchfield-results decoration？

Question

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

我想创建一个类似于apple.com右上角的搜索框。它应该有圆角，放大镜图标，以及用户开始输入时出现的取消/清除按钮。我可以得到大部分的方法：

<input type="search" /> 

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

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

Answer 1

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

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

Answer 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“将按钮放在输入字段旁边，并将其向左移动以使其浮动在输入字段上。