验证中...
Languages: CSS
Categories: CSS 技巧
Latest update 2019-05-05 16:54
HTML页
Raw Copy
<!--单选-->
<label>
<input class="radio-inp" hidden="hidden" type="radio">
<span class="cur-radio"></span>
</label>
<!--多选-->
<label>
<input class="checkbox-inp" hidden="hidden" type="checkbox">
<span class="cur-checkbox"></span>
</label>
CSS
Raw Copy
.cur-radio,.cur-checkbox{
display: block;
position: relative;
font-size: 14px;
float: left;
cursor: pointer;
}
//单选
.cur-radio:after{
width: 14px;
height: 14px;
display: block;
position: relative;
float: left;
border: 1px solid rgba(0,0,0,0.2);
background-color: #ffffff;
border-radius: 100%;
content: "";
margin-right: 10px;
box-sizing: border-box
}
.radio-inp:checked+.cur-radio:after{
display: block;
position: relative;
float: left;
border: 5px solid #0080d1;
background-color: #ffffff;
border-radius: 100%;
content: ""
}
//多选
.cur-checkbox:before{
width: 14px;
height: 14px;
display: block;
position: relative;
float: left;
margin-right: 10px;
border: 1px solid #c2d4df;
background-color: #ffffff;
content: "";
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.checkbox-inp:checked+.cur-checkbox:before{
border: 5px solid #0080d1;
background-color: #ffffff;
content: ""
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close