JSFiddle - React, Tailwind, and code Playground

by digthedoug

HTML

<div class="radioButt" >
  <h1>Radio:</h1>
  <p>Val1 : <span></span><input type="radio" id="1" checked="checked" name="radio" ><span></span></p>
  <p>Val2 : <span></span><input type="radio" id="2" name="radio" ><span></span></p>
  <p>Val3 : <span></span><input type="radio" id="3" name="radio" ><span></span></p>
</div>
    
<div class="radioButt" >
  <h1>Checkbox:</h1>
  <p>Ck1 : <span></span><input type="checkbox" id="ck1" checked="checked" ><span></span></p>
  <p>Ck2 : <span></span><input type="radio" id="ck2" ><span></span></p>
  <p>Ck3 : <span></span><input type="radio" id="ck3" ><span></span></p>
</div>

CSS

.radioButt p {
	padding: 10px;
}

.radioButt span{
	position: relative;
	right: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	padding: 3px;
	color: #FFF;
	text-align: center;
	background: #c06f59;
}
 
.radioButt  span:after{
	content: "no"; /*if CSS are disbled span elements are not displayed*/
}
 
.radioButt input{
	position: relative;
	right: 0;
	margin: -26px;
	width: 31px;
	height: 31px;
	/*hide the radio button*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
        cursor: pointer;
}
 
.radioButt  input[type="radio"] + span,
.radioButt  input[type="checkbox"] + span{ /*the span element that immediately follow the radio button */
	visibility: hidden; /*temporarily hide the "YES" label*/
	background: #6EB558;
}
 
.radioButt input[type="radio"] + span:after,
.radioButt input[type="checkbox"] + span:after{
        width: 30px;
        display: inline-block;
	content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
 
 
.radioButt input[type="radio"]:checked + span,
.radioButt input[type="checkbox"]:checked + span{
	visibility: visible; /*show the "YES" label only if the radio button is checked*/
}