您的位置：首页 > Web前端 > CSS

CSS3实现一个开关按钮控件

2016-09-06 22:03 375 查看

之前有写过自定义一个复选框的样式。

链接：http://blog.csdn.net/u014291497/article/details/52081774

又做了一个左右滑动开关效果的复选框。

效果图：

上图左侧为了显示数据变化所以显示出来，实际使用中设置

display:none

属性就可以了。

本示例中全部使用HTML及CSS实现。

github地址：https://github.com/justforuse/HTML-CSS-JS/tree/master/customize-radio

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<script></script>
<style>
.text {
display: none;
}
.on{
color:#333;
}
.off{
color:#eee;
}
.circle {
position: absolute;
display: inline-block;
}

#radio ~label {
background-color: grey;
}

#radio ~label .circle {
left: 0;
transition: all 0.3s;
--webkit-transition: all 0.3s;
}

#radio ~label .on {
display: none;
}

#radio ~ label .off {
display: inline-block;
}

#radio:checked ~ label {
background: lime;
}

#radio:checked ~label .circle {
left: 50px;
}
#radio:checked ~label .on {
display: inline-block;
}

#radio:checked ~ label .off {
display: none;
}

label {
display: inline-block;
position: relative;
height: 30px;
width: 80px;
border-top-left-radius: 15px 50%;
border-bottom-left-radius: 15px 50%;
border-top-right-radius: 15px 50%;
border-bottom-right-radius: 15px 50%;
box-shadow: 0 0 2px black;
}

label .circle {
display: inline-block;
height: 26px;
width: 26px;
border-radius: 50%;
border: 2px solid #333;
background-color: #eee;
}

label .text {
text-indent: 30px;
line-height: 28px;
font-size: 18px;
font-family: sans-serif;
text-shadow: 0 0 2px #ddd;
}
</style>
</head>

<body>
<div class="container">
<input type="checkbox" id="radio" name="switch">
<label for="radio" class="radio">
<span class="circle"></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</div>
</body>

</html>

此文档的作者：justforuse

Github Pages：justforuse

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航