用css样式使checkbox复选框变为圆角_checkbox 圆角

1.当你们看到这篇文章时，想必你已经发现了如果想改变checkbox的样式变成圆角，通过以往的css在checkbox下添加border-radius=50%;是实现不了的。

 <input type="checkbox">

input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
}

/*无法实现*/

2.所以接下来就用css样式实现

<!-- html -->
<span>
       <input type="checkbox"class="Checkbox" id="check1">
       <label for="check1"></label>
</span>

span {
    position: relative;
}
.Checkbox {
    position: absolute;
    visibility: hidden;
}
.Checkbox+label {
    position:absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    background-color:#DEDEDE;
} 
.Checkbox:checked+label:after {
    content: "";
    position: absolute;
    left: 2px;
    top:2px;
    width: 9px;
    height: 4px;
    border: 2px solid #424242;
    border-top-color: transparent;
    border-right-color: transparent; 
    transform: rotate(-45deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
}

2.效果查看演示