CSS实现的ios样式Toggle开关按钮

CSS实现的ios样式Toggle开关按钮源码下载

看看谁在用

查看文件结构

文件大小:0.00M

资源分类: 插件-表单和按钮

更新时间: 2020-12-15

一款很轻的iOS样式开关小部件,使用纯CSS代码实现的HTML复选框,基于CSS flexbox充分响应和灵活。
.toggle {
  background-color: grey;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.toggle-active {
  background-color: blue;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

input {
  display: none;
}

.slider {
  height: 24px;
  width: 24px;
  background-color: white;
  border-radius: 12px;
  margin: 4px;
}

input:checked + .toggle {
  background-color: green;
}

input:checked + .toggle > .slider {
  align-self: flex-end;
}

CSS实现的ios样式Toggle开关按钮

正在加载文件目录...

也许你还喜欢

  1. jQuery开关按钮插件jtoggler
  2. css3打开飞机窗口特效代码
  3. jquery左右开关按钮插件CheckBox
  4. css3酷黑开关立体3d
  5. css3模拟真实的开关按钮特效
  6. 美化checkbox立体开关按钮
纯css实现的提示工具Balloon.css
  • 标签查找|关于我们|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2