您的位置：首页 > Web前端 > CSS

模拟select样式+功能，兼容IE9+

2018-03-21 09:41 211 查看

效果：

代码：用了rem作单位，jquery.js
<!doctype html>
<html>
<meta charset="utf-8">
<title>div模拟select</title>
<script>
function fontAuto(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + 'px';
}
fontAuto();
window.onresize=function () {
fontAuto();
}
</script>
<style type="text/css">
html,body{
width:100%;
height:100%;
background:#0e3a81;
}
.input-select {
position: relative;
display: inline-block;
}
.input-select input {
border-radius: 0;
color: #00a0e9;
height: 0.3rem;
line-height: 0.3rem;
border:1px solid rgba(96, 207, 240, 0.7);
background: none;
width: 1.5rem;
display: block;
4000

font-size: 0.12rem;
position:relative;
z-index:1;
text-indent:0.1rem;
}
.input-select .dropdown {
position: absolute;
top: 0.32rem;
left: 0px;
width: 1.52rem;
padding: 0;
background: rgba(18,18,30,0.79);
border: none;
z-index: 999;
margin:0;
display:none;
}

.input-select .dropdown li {
height:0.24rem;
line-height:0.24rem;
font-size:0.12rem;
display: block;
cursor: pointer;
padding-left: 0.05rem;
border-top: 1px solid rgba(18,18,30,0.79);
border-bottom: 1px solid rgba(18,18,30,0.79);
color: #00a0e9;
}

.input-select .dropdown li:hover {
border-top: 1px solid #00ffff;
border-bottom: 1px solid #00ffff;
background: rgba(18,18,30,0.6);
}
</style>
<body>
<div class="input-select">
<input type="text" data-val="全部" class="input" value="郑爽" />
<ul class="dropdown">
<li>郑爽-沈晨曦</li>
<li>郑爽-木子</li>
<li>郑爽-易遥</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
var isBox = false; // 定义一个触发焦点事件的开关，默认为不开启状态 || 也可以给input设置一个属性，来判断
$(".input").focus(function () { // input绑定焦点事件，触发时打开焦点开关
$(".dropdown").hide();

e884
$(this).siblings(".dropdown").show();
isBox = true;
});
$(".input-select").mousemove(function () { // 鼠标进入input-box区域内打开焦点开关
isBox = true;
});
$(".input-select").mouseout(function () { // 鼠标离开input-box区域内关闭焦点开关
isBox = false;
});
$(".input").blur(function () { // input失去焦点时通过焦点开关状态判断鼠标所在区域
if (isBox == true) return false;
$(this).siblings(".dropdown").hide();
});
$(".dropdown").find('li').each(function () { // 传值给input，同时关闭焦点开关
$(this).on("click", function () {
isBox = false;
var text = $(this).text();
$(this).parent().siblings(".input").val(text);
$(this).parents(".dropdown").hide();
})
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航