JSFiddle - React, Tailwind, and code Playground

by sozonov

HTML

<form id="form143" name="form143" class="wufoo topLabel page1" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
      action="https://examples.wufoo.com/forms/custom-checkboxes-and-radio-buttons/">
  
<header id="header" class="info">
	<h2>Custom Checkboxes and Radio Buttons</h2>
	<div>Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.<br />
<br />
In browsers where it doesn't "work", it gracefully degrades back to regular checkboxes / radio buttons.</div>
</header>

<ul>
		
		
		
	
<li id="fo143li1" 		class="notranslate      ">
	<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"...

CSS

/* 
	Hide the original radios and checkboxes
	(but still accessible)
    
	:not(#foo) > is a rule filter to block browsers
	             that don't support that selector from
	             applying rules they shouldn't
	   
*/
li:not(#foo) > fieldset > div > span > input[type='radio'], 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
	
	/* Hide the input, but have it still be clickable */
	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;
	
	/* Left padding makes room for image */
	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;	
}

/*
	Change from unchecked to checked graphic
*/
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);
}