<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/check.css">
</head>
<body>
<div>
<label>
<label class="theme-checkbox"><input type="checkbox"><i class="icon-check"></i></label>
<span>多选</span>
</label>
<label>
<label class="theme-checkbox"><input type="checkbox"><i class="icon-check"></i></label>
<span>多选</span>
</label>
<label>
<label class="theme-checkbox"><input type="checkbox"><i class="icon-check"></i></label>
<span>多选</span>
</label>
</div>
<div>
<label>
<label class="theme-radio"><input type="radio" name="aa"><i class="icon-radio"></i></label>
<span>单选</span>
</label>
<label>
<label class="theme-radio"><input type="radio" name="aa"><i class="icon-radio"></i></label>
<span>单选</span>
</label>
<label>
<label class="theme-radio"><input type="radio" name="aa"><i class="icon-radio"></i></label>
<span>单选</span>
</label>
</div>
</body>
</html>
check.css
.theme-radio {
width: 16px;
height: 16px;
position: relative;
z-index: 1;
background-image: url('../imgs/radiow.png');
display: inline-block;
vertical-align: middle;
}
.theme-radio input[type=radio] {
opacity: 0;
position: absolute;
cursor: pointer;
z-index: 99;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.theme-radio input[type=radio]:checked + .icon-radio {
display: block;
}
.theme-radio .icon-radio {
position: absolute;
display: none;
width: 8px;
height: 8px;
top: 4px;
left: 4px;
background-image: url('../imgs/radio.png');
background-repeat: no-repeat;
background-position: 50%;
}
.theme-checkbox {
width: 15px;
height: 15px;
border-radius: 2px;
border: 1px solid #c8c8c8;
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
}
.theme-checkbox input[type=checkbox] {
opacity: 0;
position: absolute;
cursor: pointer;
z-index: 99;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.theme-checkbox input[type=checkbox]:checked + .icon-check {
display: block;
-webkit-animation: fadeYIn .2s ease;
animation: fadeYIn 0.2s ease;
}
.theme-checkbox .icon-check {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('../imgs/gou.png');
background-repeat: no-repeat;
background-position: 50%;
}
/* keyframes */
@-webkit-keyframes fadeYIn {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeYIn {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
效果:
例子链接:http://pan.baidu.com/s/1dFytJkH