前端 开关按钮样式_纯CSS实现扁平化风格开关按钮

开关样式预览图

前言

最近在基于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: #ddd;

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: #ddd;

}

.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,既解决了问题，也提高了代码的执行效率。