I recently purchased the "My City" theme, which is based on Bootstrap. The issue I am facing is with the search box that comes with a dropdown button next to it. I want to change the dropdown button to a select option instead. However, when I try to simply change the button to select, it disrupts the input group and the binding with the search box. You can take a look at a preview of the theme here. The current dropdown has "Market" displayed on it, but I want it to be a select dropdown instead.
Below is the code for the input group:
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn btn_cat">
<button type="button" class="btn btn-default dropdown-toggle" datatoggle="dropdown" aria-expanded="false">
<span><i class="fa fa-shopping-cart"></i>Market<span class="caret" ></span></span>
</button>
<ul class="dropdown-menu dropdown-menu-right place_dd" role="menu">
<li><a class="cinema"><i class="fa fa-film"></i>Cinema</a></li>
<li><a class="club"><i class="fa fa-beer"></i>Club</a></li>
<li><a class="cafe"><i class="fa fa-cutlery"></i>Cafe</a></li>
<li><a class="sport"><i class="fa fa-futbol-o"></i>Sport</a></li>
<li><a class="port"><i class="fa fa-life-ring"></i>Port</a></li>
<li><a class="bank"><i class="fa fa-university"></i>Bank</a></li>
<li><a class="post"><i class="fa fa-envelope-o"></i>Post</a></li>
<li><a class="showplace"><i class="fa fa-eye"></i>Showplace</a></li>
<li><a class="park"><i class="fa fa-leaf"></i>Park</a></li>
</ul>
</div>
<div class="input-group-btn btn_promo_search">
<button type="button" class="btn btn-success">Search</button>
</div>
</div>