别样的checkbox

<style type="text/css">
input[type=checkbox] {
visibility: hidden;
}

.slide_check_box {
float: left;
width: 170px;
height: 35px;
background: #45aeea;
margin-right: 20px;
margin-bottom: 20px;
border-radius: 50px;
position: relative;
}

.slide_check_box:before {
content: '是';
position: absolute;
top: 7px;
left: 18px;
height: 2px;
color: #fff;
font-size: 12px;
}

.slide_check_box:after {
content: '否';
position: absolute;
top: 7px;
left: 140px;
height: 2px;
color: #fff;
font-size: 12px;
}

.slide_check_box label {
display: block;
width: 120px;
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: 7px;
z-index: 1;
left: 10px;
background: #ddd;
text-align: center;
line-height: 22px;
}

.slide_check_box input[type=checkbox]:checked+label {
left: 35px;
background: #26ca28;
}
</style>

<form:checkboxes items="${cooperateList}" path="projectIds" itemLabel="projectName" itemValue="id" element="div class='slide_check_box'"/>