html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 自定义下拉菜单</title>
<style>
/* 隐藏原生下拉菜单 */
select {
display: none;
}
/* 自定义下拉菜单样式 */
.custom-select {
position: relative;
display: inline-block;
width: 200px;
}
.select-selected {
background-color: #f1f1f1;
padding: 8px 16px;
/*border: 1px solid #ccc;*/
cursor: pointer;
width: 100%;
box-sizing: border-box;
user-select: none;
}
.select-selected:after {
position: absolute;
content: "";
top: 50%;
right: 10px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
border-width: 0 6px 6px 6px;
border-color: transparent transparent #555 transparent;
}
.select-items {
position: absolute;
/*background-color: #f1f1f1;*/
/*border: 1px solid #ddd;*/
width: 100%;
z-index: 99;
display: none;
}
.select-items div {
padding: 8px 16px;
cursor: pointer;
background-color: #f1f1f1;
transition: background-color 0.1s ease-in-out;
}
.select-items div:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<!-- 自定义的下拉菜单 -->
<div class="custom-select">
<div class="select-selected"> 请选择编程语言</div>
<div class="select-items">
<div data-value="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript</div>
<div data-value="https://www.python.org/">Python</div>
<div data-value="https://www.java.com/">Java</div>
<div data-value="https://docs.microsoft.com/zh-cn/dotnet/csharp/">C#</div>
<div data-value="https://www.cplusplus.com/">C++</div>
<div data-value="https://www.ruby-lang.org/zh_cn/">Ruby</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var selectSelected = document.querySelector(".select-selected");
var selectItems = document.querySelector(".select-items");
var selectOptions = document.querySelectorAll(".select-items div");
selectSelected.addEventListener("click", function(e) {
e.stopPropagation();
selectItems.style.display = selectItems.style.display === 'block' ? 'none' : 'block';
selectSelected.classList.toggle("select-arrow-active");
});
selectOptions.forEach(function(option) {
option.addEventListener("click", function(e) {
var value = e.target.getAttribute("data-value");
selectSelected.textContent = e.target.textContent;
selectItems.style.display = 'none';
selectSelected.classList.remove("select-arrow-active");
window.location.href = value;
});
});
document.addEventListener("click", function(e) {
if (!selectSelected.contains(e.target)) {
selectItems.style.display = 'none';
selectSelected.classList.remove("select-arrow-active");
}
});
});
</script>
</body>
</html>
demo
https://static.hexingxing.cn/v3/html/drop_down_box
友情提示：本站所有文章，如无特殊说明或标注，均为何星星原创发布。与此同时，趋于近年来本站的文章内容频繁被他站盗用与机器采集，现已全局禁用网站文字内容操作，了解详情或转载文章请 点此 继续！
0 条评论