通过css属性实现如图所示按钮
要点：通过checkbox选中与否的状态与兄弟选择器实现相关功能
1.设置开关大小并设置定位方式为relative
2.设置checkbox属性，并设置为不可见状态
.swift-btn input[type='checkbox'] {
position: absolute;
width: 50px;
height: 25px;
opacity: 0;
z-index: 9;
outline: none;
}
3.设置按钮样式，通过伪类元素实现，并添加过渡动画
.swift-btn > label{ position: absolute; display: inline-block; width: 50px; height: 25px; border-radius: 25px; border:1px solid #ddd; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;}.swift-btn >label:before { content: ''; position: absolute; display: inline-block; left: 40px; width: 25px; height: 25px; border-radius: 20px; line-height: 25px; text-indent: -1px;}.swift-btn > label:after { content: ''; position: absolute; display:inline-block;width: 24px; height: 24px; left: 0; top: 1px; border-radius: 1px; box-shadow:2px 0px 1px #ddd; border-radius: 15px; background-color: #fff; transition: left 0.3s ease; -webkit-transition: left 0.3s ease; -moz-transition: left0.3s ease;}
4.设置input选中后的样式
.swift-btn input[type='checkbox']:checked + label{
border: 1px solid #000;
background-color: #000;
}
.swift-btn input[type='checkbox']:checked + label::before {
display: inline-block;
color: #fff;
text-indent: -25px;
}
.swift-btn input[type='checkbox']:checked + label::after {
left: 26px;
top: 1px;
width: 24px;
height: 24px;
border: 0;
box-shadow: none;
box-sizing: content-box;
}
完整代码示例
<!DOCTYPE html>
<html>
<meta charset='utf-8'>
<style>
.swift-btn {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.swift-btn input[type='checkbox'] {
position: absolute;
width: 50px;
height: 25px;
opacity: 0;
z-index: 9;
outline: none;
}
.swift-btn > label{
position: absolute;
display: inline-block;
width: 50px;
height: 25px;
border-radius: 25px;
border: 1px solid #ddd;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.swift-btn > label:before {
content: '';
position: absolute;
display: inline-block;
left: 40px;
width: 25px;
height: 25px;
border-radius: 20px;
line-height: 25px;
text-indent: -1px;
}
.swift-btn > label:after {
content: '';
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
left: 0;
top: 1px;
border-radius: 1px;
box-shadow:2px 0px 1px #ddd;
border-radius: 15px;
background-color: #fff;
transition: left 0.3s ease;
-webkit-transition:left 0.3s ease;
-moz-transition: left 0.3s ease;
}
.swift-btn input[type='checkbox']:checked + label{
border: 1px solid #000;
background-color: #000;
}
.swift-btn input[type='checkbox']:checked + label::before {
display: inline-block;
color: #fff;
text-indent: -25px;
}
.swift-btn input[type='checkbox']:checked + label::after {
left: 26px;
top: 1px;
width: 24px;
height: 24px;
border: 0;
box-shadow: none;
box-sizing: content-box;
}
</style>
<body>
<span class="add-item-status swift-btn">
<input type="checkbox" name="" id='checkbox' />
<label class="" for='checkbox'></label>
</span>
</body>
</html>