css style a checkbox

1/*this creates a circle checkbox with another smaller circle
2inside when checked, it looks nice ...*/
3input[type='checkbox'] {
4    -webkit-appearance:none;
5    display:inline-block;
6    width:16px;
7    height:16px;
8    padding:0px;
9    margin:0px;
10    margin-right:5px;
11    background:white;
12    border-radius:20px;
13    border:1px solid #ddd;
14    border: 1px solid #dee2e6;                                                
15    box-sizing:content-box;                                                   
16    line-height:16px;                                                         
17    vertical-align: sub;                                                      
18    position:relative;
19}                                                                             
20input[type='checkbox']:checked {                                     
21    border:1px solid  #55468c;                                                
22}                                                                             
23input[type='checkbox']:checked:after{                                
24  content:'';                                                                 
25  position: absolute;                                                         
26  width: 12px;                                                                
27  height: 12px;                                                               
28  border-radius: 12px;                                                         
29  background: #55468c;                                                        
30  top:50%;                                                                    
31  transform: translateY(-50%);                                                
32  margin-left: auto;
33  margin-right: auto;
34  left: 0;
35  right: 0;
36}

1/* Custom CSS Checkbox */
2<input type="checkbox">
3<label>
4  <span class="custom-checkbox"></span> my checkbox
5</label>
6
7[type="checkbox"] {
8    opacity: 0;
9    position: absolute;
10}
11
12.custom-checkbox {
13    min-width: 0.75em;
14    min-height: 0.75em;
15    margin-right: 0.75em;
16    border: 2px solid currentColor;
17    border-radius: 50%;
18    display: inline-block;
19}
20
21[type="checkbox"]:checked+label .custom-checkbox {
22    border-color: blue;
23    background: blue;
24    box-shadow: inset 0 0 0 2px white;
25}