自定义_单选按钮和复选框_样式 

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

 

posted on 2019-11-04 17:02  九涅  阅读(208)  评论(0)    收藏  举报

导航