源码Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100vw;
height: calc(100vh - 20px);
}
div.select select{
display: none;
}
div.select-box{
width: 200px;
margin: 20px 20px;
}
div.select-head{
position: relative;
height: 30px;
width: 100%;
display: flex;
border: solid 1px #000;
align-items: center;
cursor: pointer;
}
div.select-head span{
font-size: 16px;
margin-left: 5px;
color: #AAA;
}
div.select-head span.fill{
color: #000;
}
div.select-head i{
position: absolute;
height: 16px;
width: 16px;
right: 5px;
background-image: url(./arrow.png);
background-size: 16px auto;
}
div.select-body{
display: none;
width: 100%;
border: solid 1px #000;
border-top: none;
}
div.search-input{
position: relative;
height: 40px;
}
div.search-input input{
height: 30px;
width: 150px;
margin: 5px 8px;
text-indent: 10px;
padding-right: 30px;
}
div.search-input i{
position: absolute;
display: block;
height: 20px;
width: 20px;
top: 12px;
right: 15px;
background-image: url(./search-normal.png);
background-size: 20px 20px;
cursor: pointer;
}
div.search-input i:hover{
background-image: url(./search-active.png);
}
div.value-body{
max-height: 150px;
overflow: auto;
}
div.value-body li{
display: flex;
height: 24px;
padding: 5px 5px;
font-size: 14px;
alig