如何使用-webkit-appearance：searchfield-results-decoration？

Question

节日快乐，全部。当我得到答案时，我可能会感到非常愚蠢，但我想知道如何使用CSS“-webkit-appearance：searchfield-results-decoration”规则在搜索框内绘制一个小放大镜

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

获得大部分路径

<input type="search" /> 

但这缺少放大镜图标。我也知道我可以使用“-webkit-appearance：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”将按钮放在输入字段旁边，然后将其移到左侧以使输入字段浮动。