使用div创建自定义select元素可以通过以下步骤实现:
<div class="custom-select">
<div class="select-selected">请选择</div>
<div class="select-items">
<div>选项1</div>
<div>选项2</div>
<div>选项3</div>
</div>
</div>
.custom-select {
position: relative;
display: inline-block;
}
.select-selected {
background-color: #eee;
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.select-items {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
display: none;
max-height: 200px;
overflow-y: auto;
}
.select-items div {
padding: 5px 10px;
cursor: pointer;
}
.select-items div:hover {
background-color: #f4f4f4;
}
var selectContainer = document.querySelector('.custom-select');
var selectSelected = selectContainer.querySelector('.select-selected');
var selectItems = selectContainer.querySelector('.select-items');
var options = selectItems.querySelectorAll('div');
selectSelected.addEventListener('click', function() {
selectItems.style.display = 'block';
});
for (var i = 0; i < options.length; i++) {
options[i].addEventListener('click', function() {
selectSelected.innerHTML = this.innerHTML;
selectItems.style.display = 'none';
});
}
document.addEventListener('click', function(e) {
if (!selectContainer.contains(e.target)) {
selectItems.style.display = 'none';
}
});
这样就可以使用div创建一个自定义的select元素了。点击select元素时,会展开选项列表,选择一个选项后,选中的选项会显示在select元素上方。你可以根据实际需求修改样式和选项内容。
领取专属 10元无门槛券
手把手带您无忧上云