文章导航

CSS3 checkbox开关按钮效果

2018-1-4 19:24| 发布者: antzone| 查看: 4493| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了利用css3 将checkbox模拟为开关按钮效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style>
.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.switch>input {
  display: none;
}
.switch .switch-media {
  width: 40px;
  height: 25px;
  margin-right: 10px;
  padding: 5px 0;
}
.switch-media .switch-label {
  position: relative;
}
.switch-media .switch-label:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 22px;
  border: 2px solid #b9b9b9;
  border-radius: 10px;
}
.switch-media:hover .switch-label:after {
  border: 2px solid #009A61;
}
.switch-media .switch-label:before {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  top: 4px;
  left: 4px;
  background-color: #b9b9b9;
  border-color: #b9b9b9;
  border-radius: 50%;
  transition: .3s ease;
  box-shadow: 2px 2px 2px #EBEBEB;
}
.switch>input:checked+.switch-media .switch-label:after {
  border: 2px solid #009A61;
}
.switch>input:checked+.switch-media .switch-label:before {
  left: 21px;
  background-color: #009A61;
}
</style>
</head>
<body>
<div class="box">
  <label class="switch" for="switch1">
    <input type="checkbox" id="switch1" checked>
    <span class="switch-media">
      <span class="switch-label"></span>
    </span>
    <span>蚂蚁部落一</span>
  </label>
  <label class="switch" for="switch2">
    <input type="checkbox"  id="switch2">
    <span class="switch-media">
      <span class="switch-label"></span>
    </span>
    <span>蚂蚁部落二</span>
  </label>
</div>
</body>
</html>

上面代码实现了简单的开关效果,下面介绍一下实现过程。

一.代码注释:

[CSS] 纯文本查看 复制代码
.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}

采用flex弹性布局,内部项目在垂直轴上居中对齐。

弹性布局可以将内部的项目转换为块级内联元素特性,所以span元素就可以设置尺寸,也可以容纳其他块级元素或者块级内联元素。

[CSS] 纯文本查看 复制代码
.switch>input {
  display: none;
}

将input元素隐藏,在视觉上看不到复选框,但是依然可以实现它的选中和取消选中效果。

[CSS] 纯文本查看 复制代码
.switch .switch-media {
  width: 40px;
  height: 25px;
  margin-right: 10px;
  padding: 5px 0;
}

设置对应span元素的尺寸和内外边距。

默认span元素无法设置尺寸和上下内外边距(内联元素的特性);但是弹性布局将其转换为内联块级元素的特性。

[CSS] 纯文本查看 复制代码
.switch-media>.switch-label {
  position: relative;
}

将对应的span元素设置为相对定位,那么它内部定位元素位移就以它为参考对象。

[CSS] 纯文本查看 复制代码
.switch-media .switch-label:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 22px;
  border: 2px solid #b9b9b9;
  border-radius: 10px;
}

通过伪元素选择器,在尾部添加一个伪元素。

设置它的尺寸和定位方式。

这就是外部的带有圆角效果的矩形框。

[CSS] 纯文本查看 复制代码
.switch-media:hover .switch-label:after {
  border: 2px solid #009A61;
}

鼠标悬浮的时候,将圆角矩形框颜色设置为绿色。

[CSS] 纯文本查看 复制代码
.switch-media .switch-label:before {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  top: 4px;
  left: 4px;
  background-color: #b9b9b9;
  border-color: #b9b9b9;
  border-radius: 50%;
  transition: .3s ease;
  box-shadow: 2px 2px 2px #EBEBEB;
}

通过伪类选择器,添加一个伪元素,就是内部圆形。

然后设置它的属性改变是通过过渡方式实现的。

[CSS] 纯文本查看 复制代码
.switch>input:checked+.switch-media .switch-label:after {
  border: 2px solid #009A61;
}
.switch>input:checked+.switch-media .switch-label:before {
  left: 21px;
  background-color: #009A61;
}

当点击实现复选框选中,设置对应伪元素的样式,实现开关打开效果。

二.相关阅读:

(1).display: flex参阅display:flex弹性布局一章节。

(2).align-items参阅CSS3 align-items一章节。

(3).相对定位参阅CSS position:relative 相对定位一章节。

(4).绝对定位参阅CSS position:absolute 绝对定位一章节。

(5).:after参阅CSS E::after 伪对象选择器一章节。

(6).border-radius参阅CSS3 border-radius一章节。

(7).transition参阅CSS3 transition一章节。

(8).box-shadow参阅CSS3 box-shadow一章节。

(9).<label>参阅HTML <label> 标签一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部