JSFiddle - React, Tailwind, and code Playground
HTML
<form name="#">
<div class="select-style2">
<select size="1" autocomplete="off" id="selectbox">
<option value="#">1</option>
<option value="#">2</option>
<option value="#">3 </option>
<option value="#">4 </option>
<option value="#">5 </option>
<option value="#">6 </option>
<option value="#">7 </option>
<option value="#">8 </option>
<option value="#">9 </option>
<option value="#">10 </option>
<option value="#">5 </option>
<option value="#">6 </option>
<option value="#">7 </option>
<option value="#">8 </option>
<option value="#">9 </option>
<option value="#">10 </option>
<option value="#">5 </option>
<option value="#">6 </option>
<option value="#">7 </option>
<option value="#">8 </option>
<option value="#">9 </option>
<option value="#">10 </option>
<option value="#">10 </option>
<option value="#">5 </option>
<option value="#">6 </option>
<option value="#">7 </option>
<option value="#">8 </option>
<option value="#">9 </option>
<option value="#">10 </option>
</select>
</div>
<input type="button" name="test" value="Go" onClick="go()" id="btn" />
</form>
CSS
.select-style2 {
border:1px solid #777;
width: 300px;
border-radius: 3px;
overflow: hidden;
background: #FFF url("../00_common/menu/menu_arrow_down_active.png") no-repeat 95% 50%;
float:left;
}
.select-style2 select {
font-size:15px;
color:#777;
padding: 5px 8px 0px 5px;
width: 130%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
}
.select-style2{
}
.select-style2 select:focus {
outline: none;
}
.select-style2 select option {
padding:3px;
}
#btn {
border: 1px solid #333;
background: #333;
color: white;
font-size:14px;
font-weight:700;
font-style:italic;
padding: 5px;
cursor: pointer;
border-radius: 3px;
-webkit-appearance: none;
margin-left:15px;
}