下拉框模拟select中option的背景⾊改变彤彤杰作
需要做⼀个类似select的下拉 但是样式有改变 option的hover样式⾕歌浏览器不能更改，所以⾃定义
后期由于需要在页⾯任意地⽅点击能够关闭弹框，所以添加了遮罩层
下拉框模拟 select中option的背景⾊改变
.this_select_style{
display:inline-block;
position:relative;
}
.this_select_style input{
width:260px;
/*padding: 5px 50px 5px 20px;*/
padding-left:5px;
height: 35px;
border: 1px solid #d8d8d8;
box-sizing: border-box;
border-radius: 5px;
color: #999;
background: url(../images/Mall_select.png) no-repeat 87% 54%;
}
.this_select_style ul{
width:260px;
border: 1px solid #d8d8d8;
border-top:none;
border-radius: 0 0 5px 5px;
color: #999;
padding:0;
position:absolute;
top:19px;
background-color:#fff;
z-index:9999;
display:none;
box-sizing: border-box;
}
.
this_select_style .show_ul{
border-radius:5px 5px 0 0;
border-bottom:none;
background:none;
}
.this_select_style ul li{
width:100%;
padding: 5px 50px 5px 20px;
cursor:pointer;
box-sizing: border-box;
}
.
this_select_style ul li:hover{
color:#fff;
background-color:#1bbc9b;
}
#mask{
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0);//为了测试，可以加上背景⾊
position: fixed;
left: 0;
top:0;
z-index: 999;
display: none;
}
<div id="mask"></div>
<div class="this_select_style">
内饰改