div+css实现下拉选择类别搜索框效果代码
代码语言:html
所属分类:搜索
代码描述:div+css实现下拉选择类别搜索框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; outline: none; list-style: none; font-family: 'Montserrat', sans-serif; } body{ background: #e4eefa; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .wrapper .search_box{ width: 500px; background: #fff; border-radius: 5px; height: 65px; display: flex; padding: 10px; box-shadow: 0 8px 6px -10px #b3c6ff; } .wrapper .search_box .dropdown{ width: 150px; border-right: 2px solid #dde2f1; color: #9fa3b1; position: relative; cursor: pointer; } .wrapper .search_box .dropdown .default_option{ text-transform: uppercase; padding: 13px 15px; font-size: 14px; } .wrapper .search_box .dropdown ul{ position: absolute; top: 70px; left: -10px; background: #fff; width: 150px; border-radius: 5px; padding: 20px; display: none; box-shadow: 8px 8px 6px -10px #b3c6ff; } .wrapper .search_box .dropdown ul.active{ display: block; } .wrapper .search_box .dropdown ul li{ padding-bottom: 20px; } .wrapper .search_box .dropdown ul li:last-child{ padding-bottom: 0; } .wrapper .search_box .dropdown ul li:hover{ color: #6f768d; } .wrapper .search_box .dropdown:before{ content: ""; position: absolute; top: 18px; right: 20px; border: 8px solid; border-color: #5078ef transparent transparent transparent; } .wrapper .search_box .search_field{ width: 350px; height: 100%; position: relative; } .wrapper .se.........完整代码请登录后点击上方下载按钮下载查看
网友评论0