自定义select兼容ie
2019-07-05 本文已影响0人
nzjcnjzx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid #ff0000;
}
.select-box {
font-family: PingFangSC-Regular;
position: relative;
margin: 100px auto;
width: 220px;
height: 32px;
line-height: 32px;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px 4px 0 0;
white-space: nowrap;
color: #666;
background: url("./images/down.png") no-repeat right center;
}
.text {
position: absolute;
left: 5px;
top: 0;
max-width: 200px;
overflow: hidden;
color: #333;
text-overflow: ellipsis;
}
.select-option {
display: none;
position: absolute;
left: 0;
top: 31px;
height: 128px;
width: 100%;
border: 1px solid #d9d9d9;
border-top: none;
overflow: hidden;
box-sizing: border-box;
}
.option-box {
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.option {
width: 100%;
height: 32px;
cursor: default;
}
.option:hover {
background: #8FC65E;
color: #fff;
}
</style>
</head>
<body>
<h1>自定义的selelct兼容ie678</h1>
<div class="box">
<div class="select-box">
<div class="text"></div>
<div class="select-option">
<div class="option-box">
<div class="option">14234234356</div>
<div class="option">123454366</div>
<div class="option">12345534536</div>
<div class="option">45353454</div>
<div class="option">1234234456</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="./jquery.min.js"></script>
<script>
var $box = $('.select-box');
var $text = $('.text');
var $selectBox = $('.select-option')
$box.on('click', function(event) {
$selectBox.show()
event.stopPropagation();
})
$('.option').on('click', function() {
$text.text($(this).text())
setTimeout(function(){
$selectBox.hide();
})
})
$(document).on('click', function() {
$selectBox.hide();
})
</script>
