jquery下拉分类搜索效果代码
代码语言:html
所属分类:搜索
代码描述:jquery下拉分类搜索效果代码
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> body { background: white; padding-top: 50px; } .searchbox { position: relative; z-index: 1; clear: both; width: 430px; height: 40px; margin: 40px auto 50px; border: 2px solid #444786; } .mod_select { position: absolute; left: 0; top: 0; width: 98px; } .mod_select .select_box { position: relative; width: 98px; height: 36px; } .mod_select .select_box .select_txt { display: inline-block; width: 98px; height: 36px; padding-left: 28px; overflow: hidden; line-height: 36px; font-size: 16px; cursor: pointer; } .mod_select .select_box .select-icon { position: absolute; top: 50%; right: 10px; transform: translate(0,-50%); width: 10px; height: 10px; } .mod_select .select_box .option { display: none; position: absolute; top: 40px; left: -2px; width: 100px; background-color: #fff; border: 2px solid #444786; border-top: 0; } .mod_select .select_box .option li { padding-left: 28px; font-size: 16px; line-height: 2; cursor: pointer; } .searchbox .import { width: 226px; height: 38px; margin-left: 100px; padding-left: 20px; border: none; outline: none; } .searchbox .btn-search { position: absolute; right: 0; width: 100px; height: 40px; color: #fff; background-color: #444786; border: 0; outline: none; border: none; } </style> </head> <body> <div class="searchbox"> <div class="mod_select"> <div class="select_box"> <span class="select_txt">服装<.........完整代码请登录后点击上方下载按钮下载查看
网友评论0