<!DOCTYPE html>
<html>
<head>
<title>菜单页面</title>
<style>
.customeCheckBox{
width: 25px;
margin: 20px 100px;
position: relative;
}
.customeCheckBox label{
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border:1px solid #ddd;
}
.customeCheckBox label:after{
opacity: 0.1;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #999;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.customeCheckBox label:hover::after {
border: 3px solid #F00;
border-top: none;
border-right: none;
opacity: 0.4;
}
.customeCheckBox input[type=checkbox]:checked + label:after {
border: 3px solid #F00;
border-top: none;
border-right: none;
opacity: 1;
}
.customeRadio{
width: 40px;
height: 40px;
background: #DDD;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.customeRadio label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-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: 5px;
left: 5px;
z-index: 1;
background: #CCC;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
.customeRadio input[type=radio]:checked + label {
background: #F00;
}
</style>
</head>
<body>
<section>
<h3>customeCheckBox</h3>
<div class='customeCheckBox'>
<input type='checkbox' value='1' id='customeCheckBoxInput' name='' />
<label for='customeCheckBoxInput'></label>
</div>
</section>
<section>
<h3>customeRadio</h3>
<div class='customeRadio'>
<input type='radio' value='1' id='customeRadioInput' name='r1' style='display:none;'/>
<label for='customeRadioInput'></label>
</div>
</section>
<section>
<h3>customeRadio</h3>
<div class='customeRadio'>
<input type='radio' value='1' id='customeRadioInput2' name='r1' style='display:none;' />
<label for='customeRadioInput2'></label>
</div>
</section>
</body>
</html>
