纯css实现switch开关

代码比较简单，有需要直接在下边粘贴使用吧~

html:

<div class="switch-box">
<input id="switch" type="checkbox">
<label></label>
</div>

 css：

.switch-box {
position: relative;
height: 25px;
}

.switch-box label {
width: 50px;
height: 25px;
background: #ccc;
position: relative;
display: inline-block;
border-radius: 46px;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.switch-box label:after {
content: '';
position: absolute;
width: 21px;
height: 25px;
border-radius: 100%;
left: 0;
top: -5px;
z-index: 2;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.4s;
transition: 0.4s;
}

.switch-box input {
position: absolute;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
}

.switch-box label:after {
top: 0;
width: 23px;
height: 23px;
margin: 1px 0;
}

.switch-box input:checked+label {
background: #eb8597;
}

.switch-box input:checked+label:after {
left: 30px;
}

js:

  $('#switch').change(function (e) {

      var isChecked = $(this).prop("checked") ? true : false;
if (isChecked) {
    console.log('选中...')
} else {
    console.log('取消选中...')
}
});

 

 

原文地址：https://blog.csdn.net/c_furong/article/details/137687003

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！