如何使用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';
  }
});