添加搜素框或网站搜索功能是为了方便用户能够轻松、快捷地找到自己需要的信息。因此，在网站中添加一个搜索框已经成为网页设计的主流元素之一。添加一个搜索框到网站会使得用户界面更加友好，也能帮助用户轻松愉快地浏览。 [b][url=http://cssdeck.com/labs/pulsating-css3-input-search-box]脉动的CSS3输入搜索框[/url][/b] 输入搜索框带有边框和类似脉冲的阴影跳动。 [url=http://cssdeck.com/labs/pulsating-css3-input-search-box][img]http://files.jb51.net/file_images/article/201412/2014120214270535.jpg[/img] [/url] [b][url=http://thecodeblock.com/suggestions-search-box-in-pure-css/]纯CSS的建议搜索框[/b] [/url] 这是一个使用纯CSS构建扩展建议搜索框的简单教程。 [url=http://thecodeblock.com/suggestions-search-box-in-pure-css/][img]http://files.jb51.net/file_images/article/201412/2014120214270536.jpg[/img] [/url] [b][url=http://www.cssbasics.com/how-to-create-an-expanding-search-box-with-css/]CSS的扩大搜索框[/b] [/url] 扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框。 [url=http://www.cssbasics.com/how-to-create-an-expanding-search-box-with-css/][img]http://files.jb51.net/file_images/article/201412/2014120214270537.jpg[/img] [/url] [b][url=http://callmenick.com/2013/04/03/expanding-search-bar-using-css-transitions/]使用CSS转换扩大搜索栏[/b] [/url] 我们将利用CSS转换扩展了的搜索栏。搜索栏最初在视图中隐藏的，当点击搜索标签时它能顺利地扩展到视图。 [url=http://callmenick.com/2013/04/03/expanding-search-bar-using-css-transitions/][img]http://files.jb51.net/file_images/article/201412/2014120214270538.jpg[/img] [/url] [b][url=http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html]在CSS客户端全文检索[/url][/b] 使用指数化数据属性、动态样式和CSS3选择器的搜索功能，可以直接实现在CSS的全文检索，而不是JavaScript客户端。 [url=http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html][img]http://files.jb51.net/file_images/article/201412/2014120214270539.jpg[/img] [/url] [b][url=http://designmodo.com/create-drop-down-menu-search-box/]用CSS3和HTML创建搜索框下拉菜单[/url][/b] 在本教程中，我们将创建一个平面式的导航和Square UI的搜索下拉菜单。 [url=http://designmodo.com/create-drop-down-menu-search-box/][img]http://files.jb51.net/file_images/article/201412/2014120214270540.jpg[/img] [/url] [b][url=http://designshack.net/articles/css/expanding-html5-css3-search-input-field/]如何编写一个扩展HTML5/ CSS3的搜索输入字段[/b] [/url] 在本教程中我们使用两种不同的方法来构建一个扩大搜索字段。 [url=http://designshack.net/articles/css/expanding-html5-css3-search-input-field/][img]http://files.jb51.net/file_images/article/201412/2014120214270541.jpg[/img] [/url] [b][url=http://cssdeck.com/labs/0chmqae2]花式搜索框[/b] [/url] 这是一个奇特的搜索框，非常有意思！ [url=http://cssdeck.com/labs/0chmqae2][img]http://files.jb51.net/file_images/article/201412/2014120214270542.jpg[/img] [/url] [b][url=http://cssdeck.com/labs/yzks7boo]搜索栏动画[/url][/b] [url=http://cssdeck.com/labs/yzks7boo][img]http://files.jb51.net/file_images/article/201412/2014120214270543.jpg[/img] [/url] [b][url=https://github.com/wobu/CriteriaSearchBox]CriteriaSearchBox[/b] [/url] 一种提示选择搜索，像商店类别的搜索框。 [url=https://github.com/wobu/CriteriaSearchBox][img]http://files.jb51.net/file_images/article/201412/2014120214270544.jpg[/img] [/url] [b][url=http://codepen.io/robooneus/pen/ivdFH]jQuery和CSS3的"下一步级别"动画搜索表单[/b] [/url] [url=http://codepen.io/robooneus/pen/ivdFH][img]http://files.jb51.net/file_images/article/201412/2014120214270545.jpg[/img] [/url] [b][url=http://www.htmldrive.net/items/show/1167/-jQuery-and-CSS3-Next-Level-animation-search-form]基本的jQuery搜索/过滤器[/url][/b] [url=http://www.htmldrive.net/items/show/1167/-jQuery-and-CSS3-Next-Level-animation-search-form][img]http://files.jb51.net/file_images/article/201412/2014120214270546.jpg[/img] [/url] [url=http://codepen.io/menzer/pen/geAto][b]灵活的搜索框 [/b][/url] 一个灵活的搜索输入和内部固定宽度的提交按钮来固定边界的宽度。 [url=http://codepen.io/menzer/pen/geAto][img]http://files.jb51.net/file_images/article/201412/2014120214270647.jpg[/img] [/url]