<!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>
