改变 input 的 checkbox 的 样式

 

   效果图

 

html  样式

<div id="check_css">

<span><input type="checkbox" class="input_check" /><label></label></span>

</div>

 

 

css 样式

#check_css {

display: flex;

}

#check_css  span:first-child {position: relative;}

#check_css .input_check {position: absolute;width: 30px;

height: 30px;

opacity: 0;

top: 10px;

left:3px;

z-index: 10;

cursor: pointer;

}

#check_css .input_check+label {

display: inline-block;

margin-top:5px;

width: 30px;

height: 30px;

border: 1px solid #CCC;

border-radius:50%;

}

#check_css .input_check:checked + label::after {

position: absolute;

left: 10px;

top:1px;

width: 9px;height: 6px;

content: "\2714";

color: #39e60e;

display: block;

border-top-color: transparent;

border-right-color: transparent;

-ms-transform: rotate(5deg);

-moz-transform: rotate(5deg);

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}