JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="searchRow"><label>Products:</label><div class="select"><select name="search_productType"><option value=""></option><option value="A">ANALYTICAL </option><option value="D">DIP TUBES </option><option value="F">FLEXIJOINT </option><option value="I">ISOSTATIC </option><option value="L">LINED </option><option value="P">PROJECT </option><option value="R">ROTOMOLDING </option><option value="T">TOOLING </option><option value="W">OTHER </option></select></div></div>

CSS

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

.select {
	position:relative; 
	margin:0px 0 !important;
	width:auto;
	border:none !important; 
	float:none !important;
	display:inline-block;
	padding:0 !important;
	overflow:hidden !important;
	border-radius:5px !important;
	select {
		box-shadow:inset 1px 1px 0 #999 !important;
		border:1px solid #999;
		top:0;
		font-size:inherit;
		border-radius:5px !important;
	}
}
 .select:before {
    content:'';
    color:white;
    right:3px; top:1px;
    width:20px; 
    height:40px;
    border-top:1px solid #999;
    background:white;
    position:absolute;
    pointer-events:none;
    display:block;
    z-index: 2;
}
.select:after {
    content:'<>';
    font:14px "Consolas", monospace;
    color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:6px; top:3px;
    padding:0 0 2px;
    // border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
    margin:2px 0;
    z-index:4;
}