、
、
、
等HTML元素，配合CSS样式，构建一个外观符合你需求的下拉菜单。
Option 1
Option 1
Option 2
Option 3
.custom-select {
position: relative;
width: 200px;
}
.select-selected {
background-color: #f1f1f1;
padding: 8px 16px;
border: 1px solid #ccc;
cursor: pointer;
}
.select-items {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
top: 100%;
left: 0;
right: 0;
z-index: 1;
display: none; /* 初始隐藏 */
}
.select-items div {
padding: 8px 16px;
cursor: pointer;
}
.select-items div:hover {
background-color: #ddd;
}
.select-selected.select-arrow-active {
background-color: #ccc;
}
.select-arrow-active .select-items {
display: block;
}JavaScript交互： 使用JavaScript监听自定义下拉菜单的点击事件，更新“选中”状态，并将选中的值同步到隐藏的
const customSelects = document.querySelectorAll('.custom-select');
customSelects.forEach(customSelect => {
const selectSelected = customSelect.querySelector('.select-selected');
const selectItems = customSelect.querySelector('.select-items');
const selectElement = customSelect.querySelector('select');
selectSelected.addEventListener('click', function(event) {
event.stopPropagation();
closeAllSelect(this);
this.nextElementSibling.classList.toggle('select-arrow-active');
this.classList.toggle('select-arrow-active');
});
selectItems.addEventListener('click', function(event) {
if (event.target.tagName === 'DIV') {
selectSelected.innerText = event.target.innerText;
selectElement.value = selectElement.options[Array.from(selectItems.children).indexOf(event.target)].value;
selectSelected.classList.remove('select-arrow-active');
selectItems.classList.remove('select-arrow-active');
}
});
});
function closeAllSelect(elmnt) {
const arrNo = [];
const x = document.querySelectorAll(".select-items");
const y = document.querySelectorAll(".select-selected");
for (let i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (let i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.remove("select-arrow-active");
}
}
}
document.addEventListener("click", closeAllSelect);为什么直接修改
浏览器的
如何处理
如果你的
自定义
理论上，只要你正确地将用户选择的值同步到隐藏的
好了，本文到此结束，带大家了解了《HTML中如何美化select下拉菜单样式》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！
