JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

<label 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>
    <<span class="arrow"></span>
</label>

CSS

.styled_select {
    display:block;
    width:150px;
    height:20px;
	border-radius	: 5px;
	border			: 1px solid #666;
	overflow		: hidden;
	position		: relative;
}

.arrow {
	background		: url('http://www.goodpricescome.com/graphics/downarrow.png') no-repeat right -1px;
    display:block; 
    width:25px; 
    height:25px;
    position:absolute; 
    right:0;
    top:0;
    pointer-events:none;
}

.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);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:0;
	cursor			: pointer;
}

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;
}