JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<ul>




<li id="fo143li1" class="notranslate       focused">
<fieldset>
<!--[if !IE | (gte IE 8)]-->
<legend id="title1" class="desc">
Select a Choice
</legend>
<!--[endif]-->
<!--[if lt IE 8]>
<label id="title1" class="desc">
Select a Choice
</label>
<![endif]-->
<div>
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<input id="Field1_0" name="Field1" type="radio" class="field radio" value="First Choice" tabindex="1" onchange="handleInput(this);" onmouseup="handleInput(this);" checked="checked">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<input id="Field1_1" name="Field1" type="radio" class="field radio" value="Second Choice" tabindex="2" onchange="handleInput(this);" onmouseup="handleInput(this);">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<input id="Field1_2" name="Field1" type="radio" class="field radio" value="Third Choice" tabindex="3" onchange="handleInput(this);" onmouseup="handleInput(this);">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>


<li id="fo143li2" class="notranslate">
<fieldset>
<!--[if !IE | (gte IE 8)]-->
<legend id="title2" class="desc">
Check All That Apply
</legend>
<!--[endif]-->
<!--[if lt IE 8]>
<label id="title2" class="desc">
Check All That Apply
</label>
<![endif]-->
<div>
<span>
<input id="Field2" name="Field2" type="checkbox" class="field checkbox" value="First Choice" tabindex="4" onchange="handleInput(this);" checked="checked">
<label class="choice" for="Field2">First Choice</label>
</span>
<span>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox" value="Second Choice" tabindex="5" onchange="handleInput(this);">
<label class="choice" for="Field3">Second Choice</label>
</span>
<span>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox" value="Third Choice" tabindex="6" onchange="handleInput(this);">
<label class="choice" for="Field4">Third...

CSS

li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] 
{
    opacity: 0;
    float: left;
    width: 18px;
}

li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    /* Make look clickable because they are */
    cursor: pointer;
    background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}

li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);
}