JSFiddle - React, Tailwind, and code Playground

by hannesmolsen

HTML

<div id="show">
    <input type="radio" id="r1" name="rr" />
    <label for="r1"><span></span>Radio Button 1</label>
    <p />
    <input type="radio" id="r2" name="rr" />
    <label for="r2"><span></span>Radio Button 2</label>
</div>

CSS

div#show {
    width:100%;
    height: 100%;
    background:black;
    margin: 10px;
    padding: 10px;
}

input[type="radio"] {
    /* display:none; */
}

input[type="radio"] + label {
    color: white;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
}

input[type="radio"]:checked + label span {
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}