div+css+js实现定制一个下拉菜单选择框效果代码-html代码-BFW代码库

div+css+js实现定制一个下拉菜单选择框效果代码

代码语言：html

所属分类：其他

代码描述：div+css+js实现定制一个下拉菜单选择框效果代码，没有使用select标签，直接用原始的div实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
body {
     display: flex;
     align-content: center;
     justify-content: center;
     background: #252525;
}
.custom-select {
     position: relative;
     top: 50vh;
     transform: translateY(-50%);
     background: grey;
}
.select-header {
     background: grey;
     color: white;
     padding: 5px;
}

.select-selected {
     background-color: #fff;
     border: 1px solid #ccc;
     padding: 10px;
     cursor: pointer;
}

.select-options {
     display: none;
     position: absolute;
     background-color: #fff;
     width: 100%;
}

.option {
     padding: 10px;
     border: 1px solid #ccc;
     border-top: none;
}

.option:hover {
     background-color: orange;
}
</style>

  
  
  
</head>

<body translate="no">
  <div class="custom-select" id="custom-select">
     <div class="select-header">Choose a car</div>
     <div class="select-selected">Volvo</div>
     <div class="select-options">
          <div class="option" data-value="volvo"&.........完整代码请登录后点击上方下载按钮下载查看