改變 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);
}