JSFiddle - React, Tailwind, and code Playground

by benandersen

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>




</select>
</div>
<input type="button" name="test" value="Go"
onClick="go()" id="btn">

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