先来看一个很常见的搜索框的交互。大致逻辑如下：当输入框有内容时，会显示清除按钮。单击清除按钮清除输入框。当输入框有内容并且处于焦点时，输入框会被清空。显示搜索结果浮层点击搜索项，关闭整个搜索结果浮层我们来看原生实现。1、HTML5新增表单元素HTML5中新增了一个type=search的表单，如下自然支持清除功能，只需要美化点击默认清除按钮。你可以在chrome中使用::-webkit-search-cancel-button，在ie中使用::ms-clear。这里我们以chrome为例[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;宽度：36px；高度：36px；边界：0；background:url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='00512512'%3E%3Cpathd='M2568C119881198256S111248248248248-111248-248S39382568ZM121.6313.1C4.4717L338377.6C-4.74.7-12.34.7-12.34.7-170L2560L256312L-65.165.6C-4.6C-4.74.74.7-7-7-12.34.7-12.34.7-12.34.7-17-17-17-17-7-17-17-7-170l134。4338c-4.7-4.7-4.7-12.30-17l65.6-65.61c-654.7-4.7-4.7-12.30-17l39.6-39.6c4.7-4.712.3-4.7170l6565.765.1-65.6c4。7-4.712.3-4.7170l39.639.6c4.74.74.712.31225L.665.1z'%3E%3C/path%3E%3C/svg%3E")中心无重复；背景大小：16px；游标：指针；不透明度：.4；transition:.2s;}这将工作2.firefox下的实现但是上面的方法在firefox下是无效的。firefox中没有清除按钮，表现与普通输入框一致（下图为firefox表现）。如果是PC端，面向用户，firefox还是不能忽略，如何处理？可以手动添加一个按钮然后适当美化一下（相信不难),就可以得到这样的效果。现在清除按钮与输入框无关。有输入内容时如何显示清空按钮？你可以这样想：如果有内容，说明它不为空，说明它是必填项。提到必填项，就可以想到required属性。当有内容时，说明是合法的，可以匹配:valid选择器，这样可以区分具体实现如下在input中添加一个required属性然后默认隐藏清除按钮，用相邻的selector+可以实现~.clear{visibility:hidden;}.input:valid+.clear{visibility:visible;}效果如下（下图是firefox的表现）然后清空的功能输入框。如果你不使用JS，你能做什么？可以清空输入框吗？在HTML5表单中，可以直接通过type=reset重置所有内容，所以这里需要修改一下结构，将外层div改为form，然后给button添加type=reset属性，如下这将清除搜索框（图片下面是firefox的表现）当然其他浏览器也支持这种方式。遗憾的是清空后输入框无法聚焦。2、自动显示搜索提示的浮层。先添加搜索提示的HTML结构搜索结果1搜索结果2搜索结果3
