<!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;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/} 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="check2-1" name="evaluation" /> <span>与文本联动</span> </label> <label class="item03"> <div class="box"> <input type="checkbox" name="user" /> <span></span> </div> <span class="content">为了看附件连裤袜耳机零科技</span> </label> </body> </html>