自定义复选框checkbox

//html

<div class="checkboxFive">
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
    <label for="checkboxFiveInput"></label>
</div>
<div class="checkboxCont">已阅读并同意服务协议!</div>

 

 

//css样式

.checkboxFive { width: 18px; position: relative;}
.checkboxFive label { cursor: pointer; position: absolute; width: 18px; height: 18px; top: -1px; left: -1px; background: #0d97d7; border:1px solid #fff; border-radius: 5px;}
.checkboxFive label:after { opacity: 0.1; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 3px; left: 4px; border: 2px solid #fff; 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);}
.checkboxFive label:hover::after { opacity: 0.1;}
.checkboxFive input[type=checkbox]:checked + label:after { opacity: 1;}
.checkboxCont{ line-height: 18px; padding-left: .5rem;}