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

所有节日快乐.当我得到答案时,我可能会感到非常愚蠢,但我想知道如何使用CSS"-webkit-appearance:searchfield-results-decoration"规则在搜索框内绘制一个小放大镜.

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

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

我只关心在Webkit中使用它,因为它将在Cocoa WebView中使用.我不需要IE,Firefox,Opera等的标记.

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