使用 HTML5 & CSS 实现一个自定义开关按钮 switch button

switch button

  <div class="switch">
<input class="switch-checkbox" id="btn_switch" type="checkbox">
<label class="switch-label" for="btn_switch">
<span class="switch-inner" data-on="ON" data-off="OFF"></span>
<span class="switch-switch"></span>
</label>
</div>
.switch {
position: relative;
float: left;
width: 90px;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
} .switch-checkbox {
display: none;
} .switch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
} .switch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
} .switch-inner::before,
.switch-inner::after {
display: block;
float: right;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
} .switch-inner::after {
content: attr(data-on);
padding-left: 10px;
background-color: #00e500;
color: #FFFFFF;
} .switch-inner::before {
content: attr(data-off);
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
} .switch-switch {
position: absolute;
display: block;
width: 22px;
height: 22px;
margin: 4px;
background: #FFFFFF;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
} .switch-checkbox:checked+.switch-label .switch-inner {
margin-left: 0;
} .switch-checkbox:checked+.switch-label .switch-switch {
right: 0px;
}

原理分析,使用 <label> 标签配合<input type=checkbox /> 复选框来实现的;

由于 label 的 for 属性会绑定到指定的 input 上,所以当点击 label 时会间接触发隐藏的 input 的 checkbox 切换,从而动态切换开关的状态;

demo

https://codepen.io/xgqfrms/pen/qBNGGVv

See the Pen HTML5 & CSS (switch button) by xgqfrms
(@xgqfrms) on CodePen.

CSS attr() & HTML5 dataset

https://developer.mozilla.org/en-US/docs/Web/CSS/attr()

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes


article::before {
content: attr(data-parent);
}
<article
id="electric-cars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>

CSS Functions

CSS 函数

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

dataset & data-* attributes

https://caniuse.com/dataset

refs

HTML5 dataset All In One

https://www.cnblogs.com/xgqfrms/p/13747905.html

https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/

https://css-tricks.com/a-complete-guide-to-data-attributes/



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


使用 HTML5 & CSS 实现一个自定义开关按钮 switch button的更多相关文章

  1. 使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button

    通常我们使用系统自带的UIButton时,一般都是Rect矩形形式的,或则美工给出一张半圆弧的按钮,如图为一张半圆加三角形的按钮,而此时,如果给按钮添加点击事件时,响应事件依然为矩形区域,不符合我们的 ...

  2. HTML5&CSS挑战

    地址:https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp 开始学习HTML标签:欢迎来到编程训练营的第一个编程挑战!你可以 ...

  3. 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器

    一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...

  4. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  5. Android--仿1号店继续拖动查看图文详情——一个自定义的ViewGroup

    声明:源代码不是我写的,是网上的以为大神写的(地址给忘了),我拿过来以后呢,稍微改动了一下源码,使之符合了项目需求,再次特别感谢那位大牛,非常感谢. 是一个自定义布局,继承自ViewGroup pac ...

  6. HTML5 & CSS初学者教程(详细、通俗易懂)

    前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...

  7. 修改jumpserver源码并且实现一个自定义功能模块

    在前面已经说了,如何打开jumpserver的管理控制台并且自定义自己的数据模型.接下来实现一个自定义的功能模块. 先看效果! 一 定义好自己的模型(model) 1.1 这一块儿在前一篇博文已经讲过 ...

  8. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  9. 使用 TypeScript,React,ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)

    译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...

随机推荐

  1. 【Source Insight】查找功能 Lookup References 详解

    1.Options Case Sensitive //区分大小写 Whole Words Only //全字匹配查找 Skip Inactive Code //跳过无效代码查找 Skip Commen ...

  2. 机器学习基础——规则化(Regularization)

    在机器学习中,我们一直期望学习一个泛化能力(generalization)强的函数只有泛化能力强的模型才能很好地适用于整个样本空间,才能在新的样本点上表现良好. \[y=a+bx+cx^2+dx^3\ ...

  3. SpringMVC 通过commons-fileupload实现文件上传

    目录 配置 web.xml SpringMVC配置文件 applicationContext.xml 文件上传 Controller 上传实现一 上传实现二 测试 依赖 配置 web.xml < ...

  4. MD5、sha加密

    MD5: 不可逆,一般用于密码的加密存储,数字签名,文件完整性验证 MD5码具有高度离散性,不可预测 MD5长度为128位,重复率几乎为0 易受密码分析的攻击 Sha: 对于长度小于2^64位的消息, ...

  5. Quartz.Net 组件的封装使用Quartz.AspNetCore

    Quartz.Net 组件的封装使用 Quartz.Net是面向.NET的一款功能齐全的开源作业调度组件,你可以把它嵌入你的系统中实现作业调度,也可以基于Quartz.Net开发一套完整的作业调度系统 ...

  6. 玩转IDEA项目结构Project Structure,打Jar包、模块/依赖管理全搞定

    前言 你好,我是A哥(YourBatman). 如何给Module模块单独增加依赖? 如何知道哪些Module模块用了Spring框架,哪些是web工程? IDEA如何打Jar包?打War包? 熟练的 ...

  7. 十:SpringBoot-配置AOP切面编程,解决日志记录业务

    SpringBoot-配置AOP切面编程,解决日志记录业务 1.AOP切面编程 1.1 AOP编程特点 1.2 AOP中术语和图解 2.SpringBoot整合AOP 2.1 核心依赖 2.2 编写日 ...

  8. vmware打开虚拟级断电情况下,无法找到虚拟机文件

    1.此时会在建立的虚拟机目录下,有一些 %虚拟机名字%.vmx.lck 或者别的   %虚拟机名字%.***.lck   删除这些文件夹 2.虚拟文件 是一个后缀名为vmx的文件,发现断电后 变成了v ...

  9. 使用mybatis自动实现接口封装返回结果集

    import java.lang.annotation.Annotation; import java.lang.annotation.Documented; import java.lang.ann ...

  10. Thank in Java

    Think in Java 2.一切都是对象 2.1 引用操作对象 Java 中一切都是对象,因此可以采用单一固定得语法. 操作对象得标识符实际上是对对象得一个 "引用"refer ...