custom-checkbox (only CSS)

**html

    <div class="radio-wrapper">
        <div class="radio-wrap">
            <input type="radio" id="radioBtn01" name="radio-group" checked>
            <label for="radioBtn01"><span class="radio-custom"></span>radioBtn01</label>
        </div>
        <div class="radio-wrap">
            <input type="radio" id="radioBtn02" name="radio-group">
            <label for="radioBtn02"><span class="radio-custom"></span>radioBtn02</label>
        </div>
    </div>

 

**CSS

        input[type="radio"]{
            cursor: pointer;
            display: none;
        }
        label{
            cursor: pointer;
        }
        
        input[type="radio"] + label .radio-custom{
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #ccc;
        }
        
        input[type="radio"]:checked + label .radio-custom{
            width: 12px;
            height: 12px;
            background: #000;
        }