效果图
image.png
<style>
.Switch {
margin: 0;
padding: 0;
}
.Switch li {
/*clear: both;*/
/*line-height: 44px;*/
/*border-bottom: 1px solid #CCC;*/
/*list-style: none;*/
}
.Switch input {
display: none
}
.Switch label {
width: 49px;
background: #CCC;
height: 26px;
border-radius: 14px;
float: right;
/*margin: 8px 10px 0 0;*/
margin-right: .3rem;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
.Switch label em {
width: 24px;
height: 24px;
float: left;
margin: 1px;
border-radius: 13px;
box-shadow: 2px 3px 8px rgba(0,0,0,.1);
background: #FFF;
transition: 0.1s;
}
.Switch input:checked + label {
background: #508cee;
}
.Switch input:checked + label em {
margin: 1px 1px 1px 25px;
}
.Switch input:disabled + label {
opacity: 0.5
}
</style>
<ul class="Switch">
<li>
<input type="checkbox" name="Storage" id="date4" checked="checked">
<label for="date4"><em></em></label>
</li>
</ul>
网友评论