纯CSS toggle开关按钮

纯CSS toggle开关按钮

css开关按钮样式,可以将普通复选框元素转换为互动切换开关使用纯css代码。


核心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
.toggle-switch {
  --bar-height: 14px;
  --bar-width: 32px;
  --bar-color: #eee;
 
  --knob-size: 20px;
  --knob-color: #fff;
 
  --switch-offset: calc(var(--knob-size) - var(--bar-height));
  --switch-width: calc(var(--bar-width) + var(--switch-offset));
 
  --transition-duration: 200ms;
 
  --switch-transition: all var(--transition-duration) ease-in-out;
  --switch-theme-rgb: 26, 115, 232;
  --switch-theme-color: rgb(var(--switch-theme-rgb));
  --switch-box-shadow: 0 0 var(--switch-offset) #11111180;
  --switch-margin: 8px;
 
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
 
  min-height: var(--bar-height);
  min-width: var(--bar-width);
 
  margin: var(--switch-margin);
  user-select: none;
}


评论 (0)

最新评论(0)
评 论

你来打破零评论

猜你喜欢

Copyright ©2021 115cms综合内容管理系统 V4.04All Rights Reserved.