Example of using CSS3 to customize the style of input multiple-select box

 <div class="radio">
    <input type="checkbox" id="sex1">
    <label for="sex1"></label>
    Male
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> Female</div>

.radio {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*Clear default style*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*Make the input level higher than the label so that it can be selected*/
    
}

.radio label {
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    border: 1px solid #3582E9;
}

.radio input:checked+label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    /* Here half of the rectangle is displayed and then rotated 45 degrees to achieve the check mark style*/
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}