css - 如何使用-webkit-appearance : searchfield-results-decoration?

Question

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

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

完成大部分工作

<input type="search" /> 

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

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

Answer 1

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

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