autoComplete实现搜索自动弹出下拉推荐框效果代码
代码语言:html
所属分类:搜索
代码描述:autoComplete实现搜索自动弹出下拉推荐框效果代码,无需其他依赖插件
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/autoComplete.css"> <style> :root { --transition-1: all 0.3s ease-in-out; --transition-2: all 0.1s ease-in-out; } html { font-size: 1rem; font-family: "PT Sans", sans-serif; } body { margin: 0; padding-top: 50px; background: white; } .contaier { width: 100vw; height: 100vh; } .header { text-align: center; -ms-user-select: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -webkit-touch-callout: none; } .no_result { margin: 0.15rem auto; padding: 0.6rem; max-width: 280px; border: 0.05rem solid #e3e3e3; list-style: none; text-align: left; font-size: 1.1rem; color: rgb(123, 123, 123); -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; background-color: #fff; border-radius: 0 0 1rem 1rem; outline: none; } .no_result:hover { cursor: default; background-color: #fff; border: 0.05rem solid #e3e3e3; } .no_result:focus { cursor: default; background-color: #fff; border: 0.05rem solid #e3e3e3; } .in { padding: 0 2rem 0 3.5rem; color: rgba(255, 122, 122, 1); height: 3rem; width: 16.5rem; border: 0.05rem solid rgb(255, 122, 122); background: url("./images/magnifier.svg") no-repeat left/15% 1.5rem; box-shadow: rgba(255, 122, 122, 0.1) 0px 0px 20px 5px; position: relative; font-size: 1.2rem; outline: none; border-radius: 50rem; border: 0.05rem solid rgb(255, 122, 122); caret-color: rgb(255, 122, 122); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transition: all -webkit-transform 0.4s ease; text-overflow: ellipsis; } .out { position: relative; padding: 0 2rem 0 3.5rem; height: 2.1rem; width: 6rem; font-size: 1.2rem; outline: none; border-radius: 50rem; border: 0.05rem solid rgb(255, 122, 122); caret-color: rgb(255, 122, 122); color: rgba(255, 255, 255, 0); background: url("./images/magnifier.svg") no-repeat center/10% 1.5rem; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transition: all -webkit-transform 0.4s ease; text-overflow: ellipsis; } h1 { color: rgba(255, 122, 122, 1); -webkit-transition: var(--transition-1); transition: var(--transition-1); } h1>a { text-decoration: none; color: rgba(255, 122, 122, 1); } h1>a::-moz-selection { color: rgb(255, 122, 122); } h1>a::selection { color: rgb(255, 122, 122); } h4 { margin-bottom: 5px; color: #ffc6c6; } h4::-moz-selection { color: #ffc6c6; } h4::selection { color: #ffc6c6; } .github-corner { -webkit-transition: var(--transition-1); transition: var(--transition-1); } .mode { margin-top: 20px; } .toggele { display: -webkit-box; display: flex; position: abolute; border: 1px solid #ffc6c6; height: 35px; width: 120px; border-radius: 50px; -webkit-box-pack: start; justify-content: flex-start; align-content: center; -webkit-transition: var(--transition-1); transition: var(--transition-1); } .toggeler { display: grid; cursor: pointer; background-color: rgba(255, 198, 198, 1); color: #fff; height: 25px; width: 60px; border-radius: 50px; margin: 5px; text-align: center; align-content: center; align-self: flex-start; -webkit-transition: var(--transition-1); transition: var(--transition-1); -ms-user-select: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -webkit-touch-callout: none; } .toggeler:hover { width: 70px; background-color: rgba(255, 122, 122, 0.7); } .toggeler::-moz-selection { color: #fff; } .toggeler::selection { color: #fff; } .strict { display: inline; } .loose { display: inline; } .selection { margin-top: 25vh; font-size: 2rem; font-weight: bold; color: #ffc6c6; -webkit-transition: var(--transition-1); transition: var(--transition-1); } .selection::-moz-selection { color: #64ceaa; } .selection::selection { color: #64ceaa; } .footer { display: -webkit-box; display: flex; width: 100vw; position: absolute; bottom: 2rem; color: rgb(147, 147, 147); -webkit-box-pack: center; justify-content: center; -webkit-transition: var(--transition-1); transition: var(--transition-1); } .footer>div>a { text-decoration: none; color: rgb(147, 147, 147); } .footer>div>a::-moz-selection { color: rgba(255, 122, 122, 1); } .footer>div>a::selection { color: rgba(255, 122, 122, 1); } .copyrights { font-size: 0.8rem; } .copyrights::-moz-selection { color: rgb(147, 147, 147); } .copyrights::selection { color: rgb(147, 147, 147); } .copyrights>a::-moz-selection { color: rgb(147, 147, 147); } .copyrights>a::selection { color: rgb(147, 147, 147); } @media only screen and (max-width: 600px) { .selection { margin-top: 15vh; } .footer { bottom: 1.5rem; -webkit-transition: var(--transition-1); transition: var(--transition-1); } } @media only screen and (max-height: 500px) { .footer { display: none; } } </style> </head> <body > <div class="container"> <div class="body" align="center"> <input id="autoComplete" type="text" tabindex="1"> <div class="mode"> <h4&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0