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

开关样式预览图

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

关键字：css, html, php, JavaScript

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！