JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="fiddle">Drop Down - using radio buttons</div>

<div class="drop">

<div class="qtip" id="drop">
<input type="radio" name="a" id="a_1" value="one"  onclick="tog1b()"><label for="a_1" id="s1a">England</label>

<input type="radio" name="a" id="a_2" value="two" onclick="tog1b()"><label for="a_2" id="s2a">N.Ireland</label>

<input type="radio" name="a" id="a_3" value="three" onclick="tog1b()"><label for="a_3" id="s3a">Scotland</label>

<input type="radio" name="a" id="a_4" value="four" onclick="tog1b()"><label for="a_4" id="s4a">Wales</label>
</div>


<a href="javascript:;" class="tt" id="sel1" onclick="tog1a()">
<div class="sel" id="sele1">Please Select</div>
</a>

</div>

<p>Praesent et orci orci. Nulla eget ipsum vitae nisi bibendum tempus id eget nibh. In eget luctus sem. Maecenas in neque ac libero tincidunt aliquam. Vivamus congue aliquam tempus. Duis vehicula lacinia volutpat. Etiam dui neque, ultrices vitae porta et, iaculis ac dolor. In pellentesque, ante id lacinia aliquam, nulla eros tincidunt dui, nec mattis erat orci in augue. Nulla tincidunt nunc ut lacus ullamcorper vehicula.</p>

<div class="drop">

<div class="qtip" id="drop2">
<input type="radio" name="b" id="b_1" value="one"  onclick="tog2b()"><label for="b_1" id="s1b">Residential</label>

<input type="radio" name="b" id="b_2" value="two" onclick="tog2b()"><label for="b_2" id="s2b">Second Home</label>

<input type="radio" name="b" id="b_3" value="three" onclick="tog2b()"><label for="b_3" id="s3b">Buy to Let</label>

<input type="radio" name="b" id="b_4" value="four" onclick="tog2b()"><label for="b_4" id="s4b">Commercial</label>
</div>


<a href="javascript:;" class="tt" id="sel2" onclick="tog2a()">
<div class="sel" id="sele2">Please Select</div>
</a>

</div>

<p>Nunc mollis euismod facilisis. Donec tincidunt mauris et libero posuere lobortis eu sed orci. Vivamus tristique dapibus felis, quis porttitor nibh. In et laoreet tortor, eget commodo nunc. Praesent massa felis, consequat in...

CSS

.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}

.qtip {
position: absolute;
z-index: 99;
background-color: #fff;
border: solid #ccc;
border-width: 1px 0 0 1px;
margin:0;
padding: 0;
width: 280px;
color:#000;
display:none;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.42);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.42);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.42);
}

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

.sel {
	border: 1px solid #ccc;
	padding: 10px;
	cursor: pointer;
  display:block;
  max-width:260px;
background-image: url('data:image/gif;base64,R0lGODlhDAAGAJEAAAC22////23b223b/yH5BAAHAP8ALAAAAAAMAAYAAAIRHI45YYkbmAMwymdzqzkOHhQAOw==');
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.drop {
font-family:arial;
}
.drop a {
text-decoration:none;color:#000;
}

label {
  border:solid #999;
  border-width:0 0 1px 0;
	padding: 10px;
	cursor: pointer;
  display:block;
  max-width:280px;
}

input[type="radio"]:checked + label {
	
  background-color:#fff;
}
input[type="radio"]:hover + label {
	border:solid #999;
  border-width:0 0 1px 0;
  background-color:#ECFAFF;
}

JavaScript

function tog1a(){
document.getElementById('drop').style.display = "block";
}

function tog1b(){
document.getElementById('drop').style.display = "none";

var sela1 = document.getElementById('s1a').innerText;
var sela2 = document.getElementById('s2a').innerText;
var sela3 = document.getElementById('s3a').innerText;
var sela4 = document.getElementById('s4a').innerText;

if (document.getElementById('a_1').checked) {document.getElementById('sele1').innerText = sela1;}

if (document.getElementById('a_2').checked) {document.getElementById('sele1').innerText = sela2;}

if (document.getElementById('a_3').checked) {document.getElementById('sele1').innerText = sela3;}

if (document.getElementById('a_4').checked) {document.getElementById('sele1').innerText = sela4;}
}

function tog2a(){
document.getElementById('drop2').style.display = "block";
}

function tog2b(){
document.getElementById('drop2').style.display = "none";

var selb1 = document.getElementById('s1b').innerText;
var selb2 = document.getElementById('s2b').innerText;
var selb3 = document.getElementById('s3b').innerText;
var selb4 = document.getElementById('s4b').innerText;

if (document.getElementById('b_1').checked) {document.getElementById('sele2').innerText = selb1;}

if (document.getElementById('b_2').checked) {document.getElementById('sele2').innerText = selb2;}

if (document.getElementById('b_3').checked) {document.getElementById('sele2').innerText = selb3;}

if (document.getElementById('b_4').checked) {document.getElementById('sele2').innerText = selb4;}
}