JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<form action="demo_form.asp">
  <label for="male"></label>
  <input type="checkbox" name="sex" id="male" value="male"><br>
</form>

CSS

label {
    background:url('http://line25.com/wp-content/uploads/2011/button/18.jpg') no-repeat -155px -180px;
    width:200px;
    height:85px;
    display:block;
}

label.active{
    background:url('http://line25.com/wp-content/uploads/2011/button/18.jpg') no-repeat -155px -295px;
}

input[type="checkbox"] {
    display:none;
}

JavaScript

$('#male').change(function(){
    if($(this).prop('checked')){
        $('label').addClass('active');
    } else {
        $('label').removeClass('active');
    }
});