搜索框样式 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框</title> <link href="http://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <style type="text/css"> /*common*/ a{text-decoration: none;} /*iconfont*/ @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_1457673475_486826.eot'); /* IE9*/ src: url('//at.alicdn.com/t/font_1457673475_486826.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1457673475_486826.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1457673475_486826.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1457673475_486826.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont{font-family:"iconfont";font-style:normal;} /*style*/ .search {width: 320px;position: absolute;top: 50px;right: 50px;} .search .form {float: left;border: 1px solid #e4e4e4;border-right: 0 none;width: 280px;height: 36px;position: relative;background-color: #fff;} .search .form input {position: absolute;left: 0;top: 0;z-index: 0;color: #bbb;width: 145px;height: 18px;line-height: 18px;border: 0 none;padding: 9px 130px 9px 5px;outline: 0;} .search .form span {height: 36px;position: absolute;top: 0;right: 0;z-index: 10;} .search .form span a {display: block;float: left;width: 35px;height: 20px;line-height: 20px;background: #eee;color: #666;margin: 8px 7px 0 0;display: inline;text-align: center;cursor: pointer;} .search .form span a:hover{background: #999;color: #ddd;} .search a.seaIcon {display: block;float: left;width: 39px;height: 30px;background: #f60;padding-top: 8px;cursor: pointer;} .search a.seaIcon:hover{background: #f30;} .search .seaIcon{font-size: 24px;color: #fff;text-align: center;font-weight: 600;} </style> </head> <body> <div class="search"> <div class="form"> <input id="txtHSearch" type="text" value="输入“汽车”试试" placeholder="" style="color: rgb(187, 187, 187);"> <span> <a href="http://www.gzui.net/search/select" target="_blank" title="苹果">苹果</a> <a href="http://www.gzui.net/search/select" target="_blank" title="小米">小米</a> </span> </div> <a id="btnHSearch" href="javascript:;" class="seaIcon"><i class='iconfont'></i></a> </div> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $('.search .form input').focus(function(){ var dom=$(this); dom.next('span').css('display','none'); dom.css({'color':'#333','width':'225','padding':'9px 0px 9px 5px'}).val(''); }).blur(function(){ var dom=$(this); dom.next('span').css('display','block'); dom.css({'color':'#999','width':'145','padding':'9px 130px 9px 5px'}); (dom.val()=='')?dom.val('输入“汽车”试试'):dom.val(dom.val()); }); </script> } </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 搜索框样式