SOURCE

     <div class="inputbox">
            <label>
            <input type="checkbox" id="man" title="">
            <span>11111</span>
            </label>
            
            <label>
            <input type="checkbox" id="women" title="">
                <span>22222</span>
            </label>
        </div>

    
            label{
                vertical-align: middle;
            }
            label input[type=checkbox] {
                width: 15px;
                height: 15px;
                overflow: hidden;
                background: #fff;
                appearance: none;
                -webkit-appearance: none;
                border: 1px solid #808080;
                outline: none;
                margin-right: 5px;
                border-radius: 4px;
                margin-top: 0;
                vertical-align: middle;
            }
    
            input[type=checkbox]:checked {
                background: yellowgreen;
                appearance: none;
                -webkit-appearance: none;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 80%;
                border: 0;
                overflow: hidden;
                color:white;
                background-image: url("http://sowcar.com/t6/694/1554184607x1033062814.png");
                
            }