纯css3实现的模拟iso系统的关闭打开按钮绿色按钮代码

代码笔记       2.57KB      2018-08-21 10:15:42    


CSS部分的代码:

.Switch {
margin-top: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
padding: 0;
width: 800px;
}
.Switch li {
clear: both;
line-height: 44px;
border-bottom: 1px solid #CCC;
list-style: none;
}
.Switch input {
display: none
}
.Switch label {
width: 52px;
background: #CCC;
height: 28px;
border-radius: 14px;
float: right;
margin: 8px 10px 0 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
.Switch label em {
width: 26px;
height: 26px;
float: left;
margin: 1px;
border-radius: 13px;
box-shadow: 2px 3px 8px rgba(0,0,0,.1);
background: #FFF;
}
.Switch input:checked + label {
background: #a4d714;
}
.Switch input:checked + label em {
float: right;
}
.Switch input:disabled + label {
opacity: 0.5
}

代码是真的用了input 而不是用li或者div模拟出来的按钮,这样传数据就可以直接传 不用再js处理了.
效果预览 下载地址 打赏