美觀的搜尋框程式碼例項
分享一段程式碼例項,它實現了比較美觀的搜尋框效果。
有點類似於百度的搜尋頁面,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
相關文章
- div css搜尋框效果程式碼例項CSS
- 搜尋框關鍵字智慧匹配例項程式碼例項
- 搜尋框帶有搜尋提示點選消失程式碼例項
- jQuery可伸縮搜尋框程式碼例項jQuery
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- 點選可以展開和關閉的搜尋框程式碼例項
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- 美觀開關按鈕程式碼例項
- 在網頁中加入百度搜尋框例項程式碼網頁
- 二叉搜尋樹程式碼例項
- js搜尋關鍵詞自動匹配功能程式碼例項JS
- 密碼框提示文字程式碼例項密碼
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- layui 下拉框搜尋及程式碼實現UI
- js實現的警告框例項程式碼JS
- CSS3實現的美觀多級下拉選單效果程式碼例項CSSS3
- css內邊框效果程式碼例項CSS
- css邊框陰影程式碼例項CSS
- css半透明邊框程式碼例項CSS
- css條紋邊框程式碼例項CSS
- div虛線邊框程式碼例項
- 去掉連結a的虛線框程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- 密碼框輸入提示效果程式碼例項密碼
- 當前文字框高亮效果程式碼例項
- 文字框高度自適應例項程式碼
- js動態建立文字框程式碼例項JS
- js實現文字框提示程式碼例項JS
- input文字框圓角效果程式碼例項
- js之搜尋框JS
- 搜尋框佈局
- 直播app原始碼,預設顯示搜尋框 保留搜尋條件APP原始碼
- textarea文字框高度自適應程式碼例項
- css實現半透明邊框程式碼例項CSS
- 文字框與文字垂直對齊程式碼例項
- outline兩層邊框程式碼例項
- CSS設定邊框為透明程式碼例項CSS