<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.btn-toggle{
width: 100px;
height: 30px;
position: relative;
border-radius: 20px;
background-color: #6699cc;
}
.btn-checkbox{
position: absolute;
left:-4px;
top:-3px;
width: 100%;
height: 100%;
z-index: 10;
opacity: 0;
cursor: pointer;
}
.btn-style{
position: absolute;
z-index: 9;
height: 26px;
width: 45px;
background-color: #fff;
border-radius: 20px;
transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-property: all;
left:2px;
top:2px;
}
.btn-toggle .btn-checkbox:checked + .btn-style{
left:53px;
}
.btn-sex{
position: absolute;
height: 30px;
line-height: 30px;
font-size: 16px;
color: #fff;
}
.btn-toggle .left{
padding-left: 20px;
}
.btn-toggle .right{
padding-left: 65px;
}
select::-ms-expand{ display: none; }
/* --火狐、谷歌清除--*/
select{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("arrow.png") no-repeat scroll right center transparent;
padding-right: 14px;
}
option::-ms-expand{ display: none; }
option{
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
color:#fff;
background-color:#1E90FF;
}
ul li{
list-style: none;
}
</style>
</head>
<body>
<button>课表推送</button>
<div class="btn-toggle">
<input type="checkbox" class="btn-checkbox" checked="checked">
<div class="btn-style"></div>
<div class="btn-sex left">
男
</div>
</div>
<div class="box">
<div class="shi">
<input type="text" name="" readonly="readonly" value="">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<div class="fen">
<input type="text" name="" readonly="readonly">
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/***********性别按钮特效＊＊＊***********/
$(function () {
var onOff = true;
$('.btn-toggle').on('click',function(){
var oToggle = $(this);
var oSex = oToggle.children('.btn-sex');a
if(onOff){
oToggle.css("background-color","#ccc");
oSex.text('女').removeClass('left').addClass('right');
onOff = false;
}else {
oToggle.css("background-color","#6699cc");
oSex.text('男').removeClass('right').addClass('left');
onOff = true;
}
});
$(".shi ul").css('display','none');
$(".fen ul").css('display','none');
$(".shi input").click(function(){
$(this).siblings('ul').css('display','block')
});
$('.shi ul li').click(function(){
var lival=$(this).text();
$(this).parent('ul').siblings('input').val(lival);
$(this).parent('ul').css('display','none')
});
$(".fen input").click(function(){
$(this).siblings('ul').css('display','block')
});
$('.fen ul li').click(function(){
var lival=$(this).text();
$(this).parent('ul').siblings('input').val(lival);
$(this).parent('ul').css('display','none')
})
})
</script>
</html>
