纯CSS实现扁平化风格开关按钮

lewinlee 发布于2019-08-19 18:45 / 2991人阅读

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。

开关样式预览图 前言

最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用bootstrap框架自带的一个按钮插件，结果在引用js的时候总是出错，就找了找资源，用纯css实现这个按钮开关的功能。

具体代码过程

话不多说，直接上代码实现！

html代码部分

</>复制代码 
        是否选择：

css代码部分

</>复制代码 
input[type=checkbox] {
    visibility: hidden;
}
.checkbox {
    width: 120px;
    height: 30px;
    background: #FFF;
    margin: 1px 1px;
 
    border-radius: 10px;
    position: relative;
}
.checkbox:before {
    content: "是";
    position: absolute;
    top: 12px;
    left: 16px;
    height: 2px;
    /*color: #26ca28;*/
    color: #4baa34;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox:after {
    content: "否";
    position: absolute;
    top: 12px;
    left: 80px;
    height: 2px;
    color: #ffffd;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox label {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 50px;
 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ffffd;
}
 
.checkbox input[type=checkbox]:checked + label {
    left: 62px;
    /*background: #26ca28;*/
    background: #4baa34;
}

js代码部分

</>复制代码 
 if ($("#isnot").attr("checked")) {var isnot=1}else{var isnot=0};

通过jq获取按钮是否被选中的值，ajax传给后台php进行数据的处理，完成数据库的操作
jq获取按钮是否被选中的值

小结

一点小心得，自己开发时间不长，感觉在开发过程中最怕遇到一时半会解决不了的问题，尤其还有新的知识点需要掌握的时候，比如这个问题，在js代码和关于bootstrap框架js引入的，和bootstrap摸态框的处理机制上费了很多功夫，最后也不是很明白，导致这个功能一直没有实现，最后在网上查了相关信息和代码，决定直接绕过js,用纯的css来实现，最后只是引入了css，少引入了框架里的几个js,既解决了问题，也提高了代码的执行效率。

GPU云服务器云服务器纯CSS 服务器上的直按钮开关 html 按钮css html实现透明按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79948.html

纯CSS实现扁平化风格开关按钮

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择...

nanfeiyan 2019-08-29 10:57 评论0 收藏0
纯CSS实现扁平化风格开关按钮

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择...

lidashuang 2019-08-01 15:26 评论0 收藏0
纯CSS实现扁平化风格开关按钮

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择...

chuyao 2019-06-27 14:02 评论0 收藏0
CSS开关按钮三例

摘要：我们将使用纯打造一些切换开关并使其拥有类似于的用户体验。总结这是一个关于一些很好的切换开关示例这种技术使得一切完全复合语义，不会增加任何疯狂的标记，并且用纯就可以完成。获取开关按钮代码可以我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbo...

ivan_qhz 2019-08-30 11:03 评论0 收藏0
CSS开关按钮三例

摘要：我们将使用纯打造一些切换开关并使其拥有类似于的用户体验。总结这是一个关于一些很好的切换开关示例这种技术使得一切完全复合语义，不会增加任何疯狂的标记，并且用纯就可以完成。获取开关按钮代码可以我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbo...

longmon 2019-08-02 15:13 评论0 收藏0