JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<div class="wrapper">
		<input id="textfield" type="text" name="" value="" placeholder="Select">
		<ul class="list-option">
			<li>Bahrain</li>
		    <li>Bangladesh</li>
		    <li>Barbados</li>
		    <li>Belarus</li>
		    <li>Belgium</li>
		    <li>Belize</li>
		    <li>Benin</li>
		    <li>Bhutan</li>
		    <li>Bolivia</li>
		    <li>Bosnia and Herzegovina</li>
		    <li>Botswana</li>
		    <li>Brazil</li>
		    <li>Brunei</li>
		    <li>Bulgaria</li>
		</ul>
	</div>

CSS

*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}
div{
	width:200px;
	margin:10px auto;
}
input{
	width:100%;
	border:1px solid #00a9c8;
	padding:5px 20px 5px 5px;
	background:url(https://raw.githubusercontent.com/mukulkant/easy-custom-select-box/master/tg.png) no-repeat 97% center / 10px 8px;
	font-size:13px;
}
ul{
	display:none;
	background:#00a9c8;
	height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
}
ul li{
	list-style:none;
	width:200px;
	padding:5px;
	color:#fff;
	font-size:13px;
}
ul li:hover{
	background:#079fba;
}

JavaScript

$(document).ready(function(){
		$('ul li').click(function(){
			$('#textfield').val($(this).text());
			$('ul').slideUp('fast');
		});
		$('#textfield').focus(function(){
			$('ul').slideDown('fast')
		});
	});
	$(document).on('click', function (e) {
	    if ($(e.target).closest("#textfield").length === 0) {
	        $("ul").slideUp('fast');;
	    }
	});