给你看一段超炫的CSS3代码：是关于checkbox的。
<style>*{
margin:0
padding:0
}
body{
background-color:#202838
}
.switch{
width:180px
height:55px
position:relative
margin:100px auto
}
.switch input{
filter: alpha(opacity=0)
opacity: 0
z-index: 100
position: absolute
width: 100%
height: 100%
cursor: pointer
}
.switch label{
display:block
width:80%
height:100%
position: relative
background: linear-gradient(#121823, #161d2b)
border-radius: 30px 30px 30px 30px
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.2)
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
}
.switch label i{
display:block
width:51px
height:51px
position:absolute
left:2px
top:2px
z-index:2
border-radius:50%
background: linear-gradient(#36455b, #283446)
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 12px 12px rgba(0,0,0,0.4)
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
}
.switch span {
content: ""
display: inline-block
position: absolute
right: 0px
top: 17px
width: 18px
height: 18px
border-radius: 10px
background: gradient-gradient(#36455b, #283446)
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(185,231,253,0),
inset 0 0 8px rgba(0,0,0,0.9),
inset 0 -2px 5px rgba(0,0,0,0.3),
inset 0 -5px 5px rgba(0,0,0,0.5)
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
z-index: 2
}
.switch input:checked ~ span{
content: ""
display: inline-block
position: absolute
width: 18px
height: 18px
border-radius: 10px
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
z-index: 2
background: #b9f3fe
background: gradient-gradient(#ffffff, #77a1b9)
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(100,231,253,1),
inset 0 0 8px rgba( 61,157,247,0.8),
inset 0 -2px 5px rgba(185,231,253,0.3),
inset 0 -3px 8px rgba(185,231,253,0.5)
}
.switch input:checked ~ label i {
left: 63%
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 8px 8px rgba(0,0,0,0.3),
inset -1px 0 1px #b9f3fe
-webkit-transition: all .5s ease
transition: all .5s ease
}
</style>
<body>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle"><i></i></label>
<span></span>
</div>
</body>
1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden
}
2、开始创建复选框区的HTML。代码如下：
<section>
<!-- Checbox One -->
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
3、用一个DIV元素包含checkbox，使用它们来做黑色条带和圆角。代码如下：
/*** Create the slider bar***/
.checkboxOne {
width: 40px
height: 10px
background: #555
margin: 20px 80px
position: relative
border-radius: 3px
}
4、当选中复选框后的判定代码。代码如下
/*** Move the slider in the correct position if the checkbox is clicked**/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px
}
复选框选中前。
复选框选中后。
正好最近弄了这个<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:30pxheight:30px display: nonemargin: 0pxbackground-color: red" id="lable" onclick="lable_click(this)" >
<!--<img width="30px" height="30px" src="xxx.png">或者背景图片
(点击无背景的checkbox使它变成成有背景色的对勾，
也可以如果用2个div，一个做没有对勾的背景一个做有对勾的背景，使checked一直处于隐藏状态，每次都用
document.getElementById('checked').checked = false)或document.getElementById('checked').checked = true)
使没有显示的checkbox改变它的checked值。
-->
</div>
<input id="checked" type="checkbox" value="" style="width: 30pxheight: 30pxdisplay: blockmargin: 0px" onclick ="checkbox_click(this)" />
<script>
function lable_click(obj){
obj.style.display = "none"
document.getElementById('checked').style.display = "block"
document.getElementById('checked').checked = false//
}
function checkbox_click(obj){
obj.style.display = "none"
document.getElementById('lable').style.display = "block"
}
</script>
</body>
</html>
