我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要。

现提供两种方式对其进行美化。

方法一

<div class="switch-wrap active">
<span></span>
</div>
.switch-wrap{
position: relative;
display: inline-block;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: none;
border-radius: 16px;
box-sizing: border-box;
background: #FFFFFF;
cursor: pointer;
transition: border-color .3s,background-color .3s;
vertical-align: middle;
}
.switch-wrap span{
position: absolute;
top:;
left:;
transition: transform 0.3s;
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
background-color: #fff;
}
.switch-wrap.active{
border-color: #33DB70;
background-color: #33DB70;
}
.switch-wrap.active span{
transform: translateX(20px);
}

控制切换通过添加类名 active 来控制

相关jQuery代码为

$(".switch-wrap").click(function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
}else{
$(this).addClass("active");
}
})

预览地址:https://zuobaiquan.github.io/css3/纯css实现checkbox开关切换按钮/01/index.html

源码地址 https://github.com/zuobaiquan/css3/tree/master/纯css实现checkbox开关切换按钮/01

方法二

当点击 label ,光标会根据for 属性指向checkbox中的 id

<div class='switch-wrap'>
<input type='checkbox' id= 'switch'>
<label for='switch'></label>
</div>
.switch-wrap input[type=checkbox]{
height: 0px;
width: 0px;
visibility: hidden;
margin:;
padding:;
}
.switch-wrap label{
display: inline-block;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: none;
border-radius: 16px;
box-sizing: border-box;
background: #FFFFFF;
cursor: pointer;
transition: border-color .3s,background-color .3s;
vertical-align: middle;
position: relative;
}
.switch-wrap label::before {
content: '';
position: absolute;
top:;
left:;
transition: transform 0.3s;
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
background-color: #fff;
}
.switch-wrap input:checked + label {
background: #33DB70;
}
.switch-wrap input:checked + label:before {
transform: translateX(20px);
}

这里纯粹的是css控制开关切换。无相关的js逻辑代码

预览地址:https://zuobaiquan.github.io/css3/纯css实现checkbox开关切换按钮/02/index.html

源码地址 https://github.com/zuobaiquan/css3/tree/master/纯css实现checkbox开关切换按钮/02

总结

方法一利用js控制开关逻辑。通过类名active来实现开关切换。方法二利用checkbox点击来控制开关切换。通过label指向 checkbox的id来控制。其缺点:id具有唯一性;与后端逻辑交互较难控制开关状态。故方法一可取。

纯css实现checkbox开关切换按钮的更多相关文章

  1. 尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框

    尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框 近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-me ...

  2. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端

    最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...

  5. 利用纯CSS美化checkbox和radio和滑动按钮的实现

    W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...

  6. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  7. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  8. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  9. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

随机推荐

  1. 自定义Progress小控件

    progress各种各样的都有,自定义大多数也是简单的,根据业务需求来自己定义,记录一下,先上效果图 本来想找个第三方改改就上的,不过自己的业务需求有点不搭,一下子没找到合适的,也没这么多时间去找了, ...

  2. serversql数据库的查询操作

    sql数据库 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !importan ...

  3. Java 8 中为什么要引出default方法

    (原) default方法是java 8中新引入进的,它充许接口中除了有抽象方法以外,还可以拥用具有实现体的方法,这一点跟jdk8之前的版本已经完全不一样了,为什么要这样做呢? 拿List接口举例,在 ...

  4. SQL MID() 函数

    MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID(column_name,start[,length]) FROM table_name 参数 ...

  5. HTML5仿手机微信聊天界面

    HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     给大家带来的是HTML5仿手机微信聊天界面, ...

  6. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  7. Re:Exgcd解二元不定方程

    模拟又炸了,我死亡 $exgcd$(扩展欧几里德算法)用于求$ax+by=gcd(a,b)$中$x,y$的一组解,它有很多应用,比如解二元不定方程.求逆元等等,这里详细讲解一下$exgcd$的原理. ...

  8. .NET IL实现对象深拷贝

    对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...

  9. Educational Codeforces Round 62 (Rated for Div. 2) Solution

    最近省队前联考被杭二成七南外什么的吊锤得布星,拿一场Div. 2恢复信心 然后Div.2 Rk3.Div. 1+Div. 2 Rk9,rating大涨200引起舒适 现在的Div. 2都怎么了,最难题 ...

  10. .Net Core HttpClient 忽略https证书提醒

    在测试中经常会遇到请求一些https的url,但又没有本地证书,这时候可以用下面的方法忽略警告 var httpclientHandler = new HttpClientHandler(); htt ...