JSFiddle - React, Tailwind, and code Playground

HTML

<div id="column">
	<div id="row_demo">
		<select id="culture" name="culture" width="277" style="width: 100%;" size="9">
			<option value='0' disabled style="text-align:center;">Select location</option>
			<option value='1' selected>North</option>
			<option value='2'>North-East</option>
			<option value='3'>East</option>
			<option value='4'>East-South</option>
			<option value='5'>South</option>
			<option value='6'>South-West</option>
			<option value='7'>West</option>
			<option value='8'>West-North</option>
		</select>
	</div>
</div>

CSS

#row_demo {
    width: 15%;
	height: auto;
    margin:0 auto;
}
#column
{
	height: auto;
	overflow: hidden
}
select
{
	padding: 1px 3px;
	background: rgba(0, 0, 0, 0.83);
	border-radius: 10px;
	border:1px solid rgba(150, 141, 124, 1);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	outline: 0;
	color: #D4C7AB;
	font-family: ABeeZee;
    text-align: center;
}
select:focus
{
	box-shadow: 0 0 7px rgba(246, 206, 120, 1);
		
}
select::-webkit-scrollbar {display:none;}
select::-moz-scrollbar {display:none;}
select::-o-scrollbar {display:none;}
select::-google-ms-scrollbar {display:none;}
select::-khtml-scrollbar {display:none;}