Question

I am using Bootstrap v2.0.2 . Below is the navigation bar I am building for my website

The search consists of three fields

1) Combo box or any drop down 
2) search input text field 
3) Search icon ( click-able ) 

.
Here is the fiddle for above screen shot (Please open it in firefox)

http://jsfiddle.net/krg78/1/

Is there any way I can make combobox looks like part of text input ( now two looks different fields) and in place of Search2 showing Search icon which can be click-able ( like in facebook) ?

If I use below lines , I am just getting blank field in place of icon .

<span class='add-on' style="float: right"> <i class="icon-search"></i> </span> 

Thank You all

Answer 1

Check http://jsfiddle.net/krg78/2/

You can make combobox looks like part of text input by adding position relative to combobox and moving it on into input:

.navbar-search select {
  position: relative;
  left: 84px;
}

.navbar-search input {
  padding-left: 84px;
}