JSFiddle - React, Tailwind, and code Playground
HTML
<div class="select-box">
<span class="select-label">Choose Option</span>
<ul>
<li><label><input type="checkbox"> Option 1</label></li>
<li><label><input type="checkbox"> Option 2</label></li>
<li><label><input type="checkbox"> Option 3</label></li>
<li><label><input type="checkbox"> Option 4</label></li>
</ul>
</div>
<div class="select-box1">
<span class="select-label1">Choose Option</span>
<ul>
<li><label><input type="checkbox"> Option 1</label></li>
<li><label><input type="checkbox"> Option 2</label></li>
<li><label><input type="checkbox"> Option 3</label></li>
<li><label><input type="checkbox"> Option 4</label></li>
</ul>
</div>
SCSS
.select-box{
position: relative;
.select-label{
background-color: #fff;
border: solid 1px #ccc;
padding: 10px;
width: 200px;
position: relative;
cursor: pointer;
display: inline-block;
&::after{
content: '▼';
position: absolute;
right: 10px;
top: 12px;
font-size: 12px;
}
}
&.open {
.select-label{
&::after{
content: '▲';
}
}
}
ul{
position: absolute;
top: 100%;
left: 0;
display: none;
width: 100%;
overflow-y: auto;
max-height: 150px;
margin: 0;
padding: 0;
width: 200px;
border: solid 1px #ccc;
li{
background-color: #fff;
border-bottom: solid 1px #ccc;
list-style: none;
}
li label{
padding: 10px;
display: block;
}
li:hover{
background-color: #eee;
}
}
}
JavaScript
$('.select-box .select-label').click(function(){
$(this).parent().find('ul').slideToggle();
if($(this).parent().find('ul').is(':visible')){
$(this).parent().addClass('open');
}
else{
$(this).parent().removeClass('open');
}
});
$('.select-box ul li').click(function(){
$(this).parent().slideUp();
var listText = $(this).text();
$(this).parent().parent().find('.select-label').text(listText);
$(this).parent().parent().removeClass('open');
});