Coder Wrap provides free to use snippets

/**Typeo CSS start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
* {
	box-sizing: border-box;
}
body {
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	font-family:"Poppins"
}
.select-group-main {
max-width: 500px !important;
width: 100%;
height: 280px;
border: #ccc 1px solid;
display: flex;
flex-flow: row wrap;
background-color: #ededed;
margin: auto;
padding: 20px;
}
.select-group-main .select-group-inner {width: 100%;}
/**Typeo CSS end**/
.slt-box {
display: none;
}	
.selectbox-group {
position: relative;
z-index: 1;
width: 100%;
background-color: #fff;
}
.selectbox {
	list-style: none;
	padding: 0px;
	margin: 0px;
	border: #ccc 1px solid;
	position: absolute;
	width: 100%;
	left: 0px;
	top: calc(100% - 1px);
	display: none;
	background-color: #fff;
	
}
.selectbox li {
	border-top: #ccc 1px solid;
	padding: 5px 10px;
	cursor: pointer;
	width: 100%;
}
.selectbox li.active {
	color: #fff;
	background-color: #000;
}
.selectbox li:first-child {
	border-top: none;
}
.selectlabel {
    width: 100%;
    padding: 10px;
    display: inline-block;
    border: #ccc 1px solid;
    position: relative;
    cursor: pointer; 
    background-color: #fff;  
}
.selectlabel:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -4px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 7px 0 7px;
	border-color: #000000 transparent transparent transparent;
}
.select-open:after { 
	transform: rotate(180deg); 
	-webkit-transform: rotate(180deg);
}

$(document).ready(function(){
	$('.slt-box').after('
');
		$('.slt-box option').each(function(){
		 	var option = $(this).text()
		 	$('ul.selectbox').append('
' +option+ '
')
		  	})
		$('.selectbox-group .selectlabel').text($(".slt-box").find(":selected").text());
		$('.selectbox li:first').addClass('active')
		$(document).on('click','.selectbox li', function(){
			var thistxt = $(this).text()
			$(".slt-box").find(":selected").text(thistxt);
			$('.selectbox-group .selectlabel').text(thistxt)
			$('.selectbox li').removeClass('active')
			$(this).addClass('active')
			$('.selectbox').slideUp();
			$('.selectlabel').removeClass('select-open');
		});
		$(document).on('click','.selectbox-group .selectlabel', function(){
			$('.selectbox').slideToggle();
			$(this).toggleClass('select-open');
		})
});