美观的搜索框代码实例
分类:实例代码
分享一段代码实例,它实现了比较美观的搜索框效果。
有点类似于百度的搜索页面,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; font-family: "微软雅黑"; } input { outline: none; border: 0; } .search_box { width: 500px; height: 35px; border: 2px solid teal; margin: 100px auto; font-size: 14px; } .search_box input, .search_box label { height: 35px; line-height: 35px; padding: 0 10px; } .search_box .search_txt { float: left; width: 420px; position: relative; overflow: hidden; } .search_box .search_txt input { width: 100%; position: relative; background: transparent; } .search_box .search_txt label { position: absolute; top: 0; left: 0; width: 100%; color: #999; } .search_box .search_btn { float: left; width: 80px; background: teal; font-size: 16px; color: #FFF; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { var temp = 0; $(".search_txt input").focus(function () { $(this).siblings().hide(); }); $(".search_txt input").blur(function () { if ($(this).val() == "") { $(this).siblings().show(); } }); }) </script> </head> <body> <div class="search_box"> <div class="search_txt"> <label>请输入需要搜索的内容</label> <input type="text" value="" /> </div> <input type="button" value="搜索" class="search_btn" /> </div> </body> </html>
美观的搜索框代码实例,这样的场景在实际项目中还是用的比较多的,关于美观的搜索框代码实例就介绍到这了。
美观的搜索框代码实例属于前端实例代码,有关更多实例代码大家可以查看。