Make select list same height as text box - html

Question

I am trying to make the filter to the left of my text box exactly the same height as the text box and a smaller width; exactly like in this picture
My code and current search box looks like this:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group">
<div class="input-group-btn search-panel">
<select name="search_param" id="search_param" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<option value="all">All</option>
<option value="username">Username</option>
<option value="email">Email</option>
<option value="studentcode">Student Code</option>
</select>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->

Answer 1

The CSS is off because you're using a <select> element as a <button class="dropdown-toggle">. Change your HTML to the following:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group">
<div class="input-group-btn search-panel">
<button id="search_condition" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">All <span class="caret"></span></button>
<input name="search_param" value="all" type="hidden">
<ul class="dropdown-menu">
<li class="option_select" data-value="all">All</li>
<li class="option_select" data-value="username">Username</li>
<li class="option_select" data-value="email">Email</li>
<li class="option_select" data-value="studentcode">Student Code</li>
</ul>
</div>
<input class="form-control" name="x" placeholder="Search term..." type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->
Replace your <select> with a button that toggles a dropdown with a list of options, each with an attr data-value="" that would match the value of an option in the select. This fixes the CSS issue, but your need some custom JavaScript to handle the selection of an option:
$(".option_select").on("click", function(){
$("input[name=search_param]").val($(this).attr("data-value"));
$("#search_condition").html($(this).text() + ' <span class="caret"></span>');
});
What this will do is set the label of the button to that of the option, as well as set a hidden <input> element's value to that of the selected option.
Here's a working example as well:
Bootply

Answer 2

Try This:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group" >
<div class="input-group-btn search-panel">
<select name="search_param" id="search_param" class="btn btn-default dropdown-toggle form-control" style="width:150px;" data-toggle="dropdown">
<option value="all">All</option>
<option value="username">Username</option>
<option value="email">Email</option>
<option value="studentcode">Student Code</option>
</select>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default form-control" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<!-- <button class="btn btn-primary" type="submit">Search</button> -->
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->