JSFiddle - React, Tailwind, and code Playground
HTML
<input type="range" min="1" max="5">
CSS
/* custom select */
.select-cnt {
height:34px;
overflow: hidden;
position: relative;
}
.select-cnt select:not([multiple]),
.select-cnt select:not([multiple]) {
position: absolute;
left:0;
top:0;
height:34px;
width:115%;
font-size:13px;
color:#666;
width:calc(100%+30px);
border:0 !important;
background: none !important;
border-radius:2px;
padding:10px 34px 10px 10px;
box-shadow:none;
box-sizing:border-box;
z-index: 2;
cursor: pointer;
}
.select-cnt select + .select {
width:100%;
display: block;
height:34px;
border:1px solid #CBD5DD;
border-radius:2px;
box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
box-sizing:border-box;
position:relative;
z-index: 1;
cursor: pointer;
background:url(http://domanart.pl/dema/css-forms/select-arrow.png) right center/34px 34px no-repeat;
}
/* disabled */
.select-cnt select:disabled {
cursor: not-allowed;
}
.select-cnt select:disabled + .select {
background-color:#eee;
}