select随笔
select 美化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body,ul{
margin:0;
padding: 0;
background: #1D9669;
}
.content{
padding-top:5%;
}
.content .select-wrap{
width:300px;
height:40px;
font-size: 16px;
margin: 0 auto;
background: #fff;
position: relative;
}
.content .select-wrap:after{
content: '';
display: block;
width: 10px;
height: 10px;
border-left:1px #000 solid;
border-bottom:1px #000 solid;
transform: rotate(-45deg);
position: absolute;
top:11px;
right: 12px;
}
.content .select-wrap .title{
padding: 0 15px;
line-height:40px;
cursor: pointer;
}
.content .select-wrap ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow-y: auto;
top:40px;
position: absolute;
left:0;
max-height: 0;
}
.content .select-wrap ul li{
padding: 0 15px;
line-height:40px;
cursor: pointer;
}
.content .select-wrap ul li:hover{
background-color: #e0e0e0;
}
.content .select-wrap .selected{
background: #39f;
color: #fff;
}
.content .open ul{
max-height: 250px;
}
.content .open:after{
transform: rotate(-225deg);
top:18px;
transition: all .3s ease-in;
}
</style>
<script>
$(function () {
$(".select-wrap").on("click",function () {
$(this).toggleClass("open");
});
var liItem = $(".select-wrap ul li");
liItem.on("click",function () {
var $this = $(this);
liItem.removeClass("selected");
$this.addClass("selected");
$(".title").text($this.text());
$(".selected").text($this.text()).attr("data-value",$this.attr("data-value"));
})
})
</script>
<body>
<div class="content">
<div class="select-wrap">
<p class="title">请选择</p>
<ul>
<li data-value="HTML">HTML</li>
<li data-value="CSS">CSS</li>
<li data-value="JS">JS</li>
<li data-value="PHP">PHP</li>
</ul>
</div>
</div>
</body>
</html>
