通过css3实现开关选择按钮

最新推荐文章于 2021-12-02 09:00:38 发布

dbfgefai009910

最新推荐文章于 2021-12-02 09:00:38 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/CCDS01/p/7690935.html

版权

通过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: 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>

<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>

</body>

</html>

转载于:https://www.cnblogs.com/CCDS01/p/7690935.html

dbfgefai009910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过css3实现开关选择按钮

通过css属性实现如图所示按钮要点：通过checkbox选中与否的状态与兄弟选择器实现相关功能1.设置开关大小并设置定位方式为relative.swift-btn{ position:relative; display:inline-block; width:50px; height:25px;}2.设置checkbox属...
复制链接

扫一扫