Custom _ _ style radio buttons and checkboxes

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
/*自定义单选按钮样式*/
div.item01 .box { display: inline-block; width: 27px; height: 27px; position: relative; background: #fff; vertical-align: middle; border: 1px Solid # d6d6d6 ; border-RADIUS : 100% ; background-Color : # f3f5f6 ;  } 
div.item01 .box INPUT { Opacity : 0 ; position : Absolute ; Top : -3px ; left : -4px ; width : 100% ; height : 100% ; Z-index : 100 ; / * enable input button on the span of the layer, without insensitive areas appear click * / } 

div.item01 .box input span +{ display: block; width:21px; height:21px; border-radius:50%; position:relative;  top:24%; left:24%; z-index:1; background: #1796f9; margin: -3px 0  0 -3px; cursor:pointer; }

div.item01 .box input[type="radio"] + span ,
div.item01 .box input[type="checkbox"] + span { opacity: 0;}

div.item01 .box input[type="radio"]:checked + span ,
div.item01 .box input[type="checkbox"]:checked + span{ opacity: 1;}    


/*联动样式*/
label.item02{display:block;}

label.item03{border:1px solid red !important; cursor:pointer;}
label.item03 .box{display: inline-block; width: 27px; height: 27px; position: relative; background: #fff; vertical-align: middle; border:1px solid #d6d6d6 ; border-radius: 100%; background-color:#f3f5f6;  }
label.item03 .box input{ opacity:0; position:absolute; top:-3px; left:-4px; width: 100%; height:100%; z-index:100; border:1px solid green !important;}
label.item03 .box  input[type="radio"] + label::before ,
label.item03 .box  input[type="checkbox"] + label::before { content: "\a0"; /*?????￠è????o???*/ display: inline-block; vertical-align: middle; font-size: 18px; width: 1em; height: 1em; margin-right: .4em; border-radius: 50%; border: 1px solid #01cd78; text-indent: .15em; line-height: 1; }

label.item03 .box input+span { display: block; width: 25px; height: 25px; border-radius:50%; position: relative; background: #ff9800;  top: 13%; left:13%; margin: -3px 0  0 -3px; z-index:1;}
label.item03 .box input+span:before { content:""; width:4px; height:10px; background-color:#ffffff; display:block; border-radius:3px; position:absolute; top:9px; left:5px;  transform:rotate(45deg); -ms-transform:rotate(-45deg);     /* IE 9 */ -moz-transform:rotate(-45deg);     /* Firefox */ -webkit-transform:rotate(-45deg); /* Safari ?’? Chrome */ -o-transform:rotate(-45deg);     /* Opera */ }
label.item03 .box input+span:after { content:""; width:4px; height:16px; background-color:#ffffff; display:block; border-radius:3px; position:absolute; top:4px; left:13px;  transform:rotate(45deg); -ms-transform:rotate(45deg);     /* IE 9 */ -moz-transform:rotate(45deg);     /* Firefox */ -webkit-transform:rotate(45deg); /* Safari ?’? Chrome */ -o-transform:rotate(45deg);     /* Opera */ }

label.item03 .box input[type="radio"] + span ,
label.item03 .box input[type="checkbox"] + span { opacity: 0;}

label.item03 .box input[type="radio"]:checked + span ,
label.item03 .box input[type="checkbox"]:checked + span{ opacity: 1;}
        </style>
    </head>
    <body class="body">

        <div class="item01">
            <div class="box">
                <input type="checkbox" id="check2-1" name="evaluation" />
                <span></span>
            </div>
        </div>

        <label class="item02">
            <input type="checkbox" id name="evaluation"/><span>与文本联动</span></label><label class="item03"><div class="box"><input type="checkbox" name="user"/><span></span></div><span class="content"span</To see attachment pantyhose headset zero Technology>="check2-1"   
            
        

        
            
                  
                
             
            >
        </label>
    </body>
</html>
Custom _ _ style radio buttons and checkboxes

Guess you like
