JSFiddle - React, Tailwind, and code Playground

by not_a_generic_user

HTML

<div class="styled_select ">
				<select id="list_position" name=""><option value="-1">No Change</option><option value="0">On top</option><option value="list_49">After Movies to Watch</option><option value="list_50">After Anniversary Party Supplies and MORE!</option></select>
				</div>

CSS

.styled_select {
    width:150px;
    height:20px;
	border-radius	: 5px;
	border			: 1px solid #666;
	overflow		: hidden;
	margin-bottom	: 14px;
	position		: relative;
	background		: url('http://www.goodpricescome.com/graphics/downarrow.png') no-repeat right -1px;
	cursor			: pointer;
}

.styled_select select {
/*	padding-right	: 40px;			/* So drop down items with long names don't have text over the down arrow */
	width			: calc(100% + 30px);
}

select {
	background		: transparent;
	font-size		: 13px;
	text-transform	: uppercase;
	font-weight		: bold;
}
select:focus {
	outline			: none;			/* kill the orange outline on select but doesn't work*/
	-webkit-appearance	: none;
}