通过css3实现开关选择按钮-原创手记-慕课网

通过css属性实现如图所示按钮
图片描述
要点：通过checkbox选中与否的状态与兄弟选择器实现相关功能
1.设置开关大小并设置定位方式为relative

.swift-btn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

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: left 0.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>

判断是否选中可通过判断chekbox选中状态来判断，如通过jQuery判断方法：
var status = $('#checkbox').is(':checked');