JS自定义select下拉框

 之前写项目一直只改变了select框的样式,option一直都是用的原生的,在网上查了一下发现option的样式除了颜色跟字体之外基本上都不可以修改,所以我用div ul li 模拟了select的功能

效果如图:

 HTML:

<div class="select-box">
    <div class="select-head" onclick="selectblock(this)">
        <span>请选择喜欢的食物</span>
        <span class="select-icon"></span>
    </div>
    <ul class="select-body">
        <label><input type="radio" name="food" hidden><li>汉堡</li></label>
        <label><input type="radio" name="food" hidden><li>奶茶</li></label>
        <label><input type="radio" name="food" hidden><li>火锅</li></label>
    </ul>
</div>

CSS:

.select-head{
  user-select:none;
  padding: 12px 12px;;
  width: 150px;
  border-radius: 3px;
  border: 1px solid #2260ff;
  position: relative;
  cursor: pointer;
}

.select-icon{
  display: block;
  height: 15px;
  width: 20px;
  background: url("./向下箭头.png") no-repeat center;
  background-size: cover;
  position: absolute;
  top: 35%;
  right: 0.5rem;
}

.icon-Y{
  transform: scaleY(-1);
}

.select-body{
  display: none;
  margin-top: 8px;
  background-color: #fff;
  border: 2px solid #b5bfd9;
  border-radius: 8px;
  flex-direction: column;
  padding: 0.5rem;
  box-shadow: 0 3px 7px 0 #c8cfe1;
  width: 157px;
}

.select-body li{
  user-select:none;
  cursor: pointer;
  color: #4f5d7e;
  display: block;
  padding: 0.625rem;
  border-radius: 8px;
  margin-top: 0.25rem;
  width: 100%;
}

.select-body label{
  display: flex;
}

.select-body input:checked + li{
  background-color: #e9efff;
  color: #2260ff;
}

.select-body li:hover{
  background-color: #e9efff;
}

JS:

function selectblock(event) {
  let selectBody = event.parentNode.querySelectorAll(".select-body")[0];
  let selectIcon = event.getElementsByClassName("select-icon")[0];
  let selectHead = event.parentNode.querySelectorAll(".select-head")[0];
  if (selectBody.style.display == "block") {
    selectBody.style.display = "none";
    selectIcon.classList.remove("icon-Y");
  } else {
    selectBody.style.display = "block";
    selectIcon.classList.add("icon-Y");
    //点击空白区域下拉框消失
    document.addEventListener("click", (event) => {
      let tDom = event.target;
      if(selectBody !== tDom && selectHead !== tDom && !selectHead.contains(tDom)){
        selectBody.style.display = "none";
        selectIcon.classList.remove("icon-Y");
      }
    });
  }
}

(function () {
  cks = document.querySelectorAll(".select-body>label>li");
  for (let i = 0; i < cks.length; i++) {
    cks[i].onclick = function () {
      cks[i].parentNode.parentNode.style.display = "none";
      cks[i].parentNode.parentNode.parentNode.getElementsByClassName("select-head")[0].getElementsByTagName("span")[0].innerHTML = cks[i].innerHTML;
      cks[i].parentNode.parentNode.parentNode.getElementsByClassName("select-head")[0].getElementsByTagName("span")[1].classList.remove("icon-Y");
    };
    let ckd = cks[i].parentNode.getElementsByTagName("input")[0];
    if (ckd.checked == true) {
      cks[i].parentNode.parentNode.parentNode.getElementsByClassName("select-head")[0].getElementsByTagName("span")[0].innerHTML = cks[i].innerHTML;
    }
  }
})();

使用的时候引入一下css,js然后改一下name就可以了