自定义switch按钮样式，css实现

全屏阅读
  • 基本信息
  • 作者：
  • 作者已发布：925篇文章
  • 发布时间：2020年05月12日 21:09:47
  • 所属分类：CSS, html
  • 阅读次数：2938次阅读
  • 标签：

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.toggle-switch {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 24px;
  border-radius: 5px;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  filter: alpha(opacity=0);
  opacity: 0;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-content {
  border: 1px #959A9D solid;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-content .switch-true {
  display: none;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-content .switch-false {
  background: #959A9D;
  display: block;
}
.toggle-switch-content {
  border: 1px #48a0df solid;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  display: table;
}
.switch-true,
.switch-false {
  width: 50%;
  height: 100%;
  text-align: center;
  padding-top: 3px;
  color: #fff;
}
.switch-true {
  float: left;
  background: #48a0df;
}
.switch-false {
  float: right;
  background: #959A9D;
  display: none;
}

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="toggle-switch">
                <input type="checkbox"/>
                <div class="toggle-switch-content">
                    <div class="switch-true"><i class="img-wh14 img-switch-true"></i></div>
                    <div class="switch-false"><i class="img-wh14 img-switch-false"></i></div>
                </div>
            </div>
            <div class="toggle-switch">
                <input type="checkbox"/>
                <div class="toggle-switch-content">
                    <div class="switch-true">on</div>
                    <div class="switch-false">off</div>
                </div>
            </div>

　　

效果图：

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明：本文由mpxq168发布，所有内容仅代表个人观点。版权归恒富网和mpxq168共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

目前有 0 条留言 其中：访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言！