JSFiddle - React, Tailwind, and code Playground

HTML

<select class="round-select">
    <option>-- please select --</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

CSS

.round-select {
	border: 1px solid #ccc;
	background-color: #f3f3f3;
	height: 36px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	color: #4c4c4c;
	width: 150px;
     appearance: none;  /*Removes default chrome and safari style*/
     -webkit-appearance: none;  /*Removes default chrome and safari style*/
     -moz-appearance: none;  /*Removes default style Firefox*/	
	 padding: 8px 10px;
	 text-indent: 0.01px;
	 text-overflow: '';
	 
	background-image: url(http://diymsclub.com/img/select-arrow.png);
	
	background-repeat: no-repeat;
	outline: none;
    background-position: 130px center;
}

JavaScript

// for IE compatibility 
if ($.browser.msie) {
	$('body').append("<style>select.round-select::-ms-expand { display: none; }</style>");
	}