Unpacking Twitter bootstrap inside text input

Question

Hey. I want to create a form using Twitter Bootstrap with a drop down menu inside text input. How is it →

I only managed to do it this way

<div class="input-append"> <form method="get" action="/option" class="navbar-search" id="searchForm"> <input type="text" size="16" placeholder="Search string" name="query"> <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle searchMain" style="width: 150 px;"><span>Option 1</span> <b class="caret"></b></button> <ul class="dropdown-menu" id="search-dropdown" style="left: 220px;"> <li><a href="#" id="option-1">Option 1</a></li> <li><a href="#" id="option-2">Option 2</a></li> <li><a href="#" id="option-3">Option 3</a></li> </ul> <button type="submit" class="btn btn-primary"><i class="icon-white icon-search"></i></button> </form> </div> 

But in this case droptdown is outside the text input. Is it possible to put pop-up text inside text input using Twitter Bootstrap?

Answer 1

Take a look at the “Forms” section of the bootstrap docs: http://twitter.github.com/bootstrap/base-css.html#forms

Your markup will look something like this:

 <div class="input-append"> <input class="span2" id="appendedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div> 

The key here is the input-append class.