ColorfulRadioButtons

HTML

<div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

CSS

ul{
	list-style: disc;
}

ul.sub-ul{
	list-style: none;
}

ul.sub-ul li{
	position: relative;
}

ul.sub-ul li:before{
	content:".";
	position:absolute;
}

ul.sub-ul li:before {
    content: ".";
    position: absolute;
    top: -17px;
    left: -18px;
    font-size: 80px;
    line-height: -31px;
}

/*.haha-img{
    background-image: url('haha.png');
}*/
label{
    display: block;
}
.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('https://s22.postimg.cc/ozje1f5vl/hahabefore.png');
}

.kiss-img{
    background-image: url('https://s22.postimg.cc/mi7mu91fh/kissbefore.png');
}
.tongueout-img{
    background-image: url('https://s22.postimg.cc/3pvrqocr1/tongueoutbefore.png');
}

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('https://s22.postimg.cc/rgv58rpst/haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('https://s22.postimg.cc/42n5wufl9/kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('https://s22.postimg.cc/b5v1ch865/tongueout.png');
}