JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

Custom control images from www.thecssninja.com<br/>
<br/>
<input type="radio" class="radio" value="1" name="fooby[1][]" id="r1" /><label for="r1"></label>
<input type="radio" class="radio" value="2" name="fooby[1][]" id="r2" /><label for="r2"></label>
<input type="radio" class="radio" value="3" name="fooby[1][]" id="r3" /><label for="r3"></label>
<br/>
<input type="radio" class="radio" value="1" name="fooby[2][]" id="r4" /><label for="r4"></label>
<input type="radio" class="radio" value="2" name="fooby[2][]" id="r5" /><label for="r5"></label>
<input type="radio" class="radio" value="3" name="fooby[2][]" id="r6" /><label for="r6"></label>

CSS

label {
  padding: 0 0 0 24px;
}

input[type=radio] { 
    padding:0;
    margin:0;
    width:16px;
    height:16px; 
    position:absolute;
    left:0;
    opacity:0
}

input[type=radio] + label {
    background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat; 
    width:50px;
    height:16px;
}

input[type=radio]:checked + label {
  background-position:0 -81px;
}