Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Styled
and
filterable
select dropdown
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
css
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100vh; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-family: 'Ek Mukta'; text-transform: uppercase; font-weight: 600; letter-spacing: 4px; background: #1D1F20; } h1 { margin-top: 10vh; font-size: 2.5rem; max-width: 500px; letter-spacing: 3px; text-align: center; line-height: 1.5; font-family: 'Open Sans'; text-transform: capitalize; font-weight: 800; color: white; } h1 span { color: #FF908B; } form { position: relative; width: 18rem; margin-top: 8vh; } .chosen-value, .value-list { position: absolute; top: 0; left: 0; width: 100%; } .chosen-value { font-family: 'Ek Mukta'; text-transform: uppercase; font-weight: 600; letter-spacing: 4px; height: 4rem; font-size: 1.1rem; padding: 1rem; background-color: #FAFCFD; border: 3px solid transparent; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .chosen-value::-webkit-input-placeholder { color: #333; } .chosen-value:hover { background-color: #FF908B; cursor: pointer; } .chosen-value:hover::-webkit-input-placeholder { color: #333; } .chosen-value:focus, .chosen-value.open { box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2); outline: 0; background-color: #FF908B; color: #000; } .chosen-value:focus::-webkit-input-placeholder, .chosen-value.open::-webkit-input-placeholder { color: #000; } .value-list { list-style: none; margin-top: 4rem; box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2); overflow: hidden; max-height: 0; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .value-list.open { max-height: 320px; overflow: auto; } .value-list li { position: relative; height: 4rem; background-color: #FAFCFD; padding: 1rem; font-size: 1.1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-transition: background-color .3s; transition: background-color .3s; opacity: 1; } .value-list li:hover { background-color: #FF908B; } .value-list li.closed { max-height: 0; overflow: hidden; padding: 0; opacity: 0; }
JavaScript
'use strict'; var inputField = document.querySelector('.chosen-value'); var dropdown = document.querySelector('.value-list'); var dropdownArray = [].concat(document.querySelectorAll('li')); var dropdownItems = dropdownArray[0]; dropdown.classList.add('open'); inputField.focus(); // Demo purposes only var valueArray = []; dropdownItems.forEach(function (item) { valueArray.push(item.textContent); }); var closeDropdown = function closeDropdown() { dropdown.classList.remove('open'); }; inputField.addEventListener('input', function () { dropdown.classList.add('open'); var inputValue = inputField.value.toLowerCase(); var valueSubstring = undefined; if (inputValue.length > 0) { for (var j = 0; j < valueArray.length; j++) { if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) { dropdownItems[j].classList.add('closed'); } else { dropdownItems[j].classList.remove('closed'); } } } else { for (var i = 0; i < dropdownItems.length; i++) { dropdownItems[i].classList.remove('closed'); } } }); dropdownItems.forEach(function (item) { item.addEventListener('click', function (evt) { inputField.value = item.textContent; dropdownItems.forEach(function (dropdown) { dropdown.classList.add('closed'); }); }); }); inputField.addEventListener('focus', function () { inputField.placeholder = 'Type to filter'; dropdown.classList.add('open'); dropdownItems.forEach(function (dropdown) { dropdown.classList.remove('closed'); }); }); inputField.addEventListener('blur', function () { inputField.placeholder = 'Select state'; dropdown.classList.remove('open'); }); document.addEventListener('click', function (evt) { var isDropdown = dropdown.contains(evt.target); var isInput = inputField.contains(evt.target); if (!isDropdown && !isInput) { dropdown.classList.remove('open'); } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS可过滤下拉菜单-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号