JSFiddle - React, Tailwind, and code Playground
HTML
<input type='checkbox' name='q1_myOptions[]' id="input_1_0"/>
<label for="input_1_0"></label>
<input type='checkbox' name='q1_myOptions[]' id="input_1_1"/>
<label for="input_1_1"></label>
CSS
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background-size:cover;
background-position:center;
background-repeat: no-repeat;
height: 25px;
width: 25px;
display:inline-block;
}
input#input_1_0 + label {
background-image: url('https://www.seeklogo.net/wp-content/uploads/2015/09/new-google-favicon-logo.png');
}
input#input_1_0:checked + label {
background-image: url('http://goo.gl/Qa5Afb');
}
input#input_1_1 + label {
background-image: url('http://2.bp.blogspot.com/-mfrRQkewv3Y/VkSzsWasszI/AAAAAAAAAQQ/LIjzOEn35B0/s1600/drive%2Blogo.png');
}
input#input_1_1:checked + label {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Google_plus.svg/1047px-Google_plus.svg.png');
}