Bootstrap 3 Button Dropdown Input Controls

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<br/><br/>

<div class="container">
   <div class="row">

      <div class="col-sm-3">
         <h5>Normal Dropdown Button</h5>

         <div class="panel panel-default">
            <div class="panel-body">
               <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                   <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Another item</a></li>
                   <li><a href="#">This is a longer item that will not fit properly</a></li>
                 </ul>
               </div>
             </div>
          </div>

      </div>

   </div>
   <div class="row">

      <div class="col-sm-3">
         <h5>Dropdown Button w/.form-control</h5>

         <div class="panel panel-default">
            <div class="panel-body">
               <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
                   <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Another item</a></li>
                   <li><a href="#">This is a longer item that will not fit properly</a></li>
                 </ul>
               </div>
             </div>
          </div>

      </div>

   </div>
   <div class="row">

      <div class="col-sm-3">
         <h5>Dropdown Button w/custom styles</h5>

         <div class="panel panel-default">
           ...

CSS

.btn-input {
   display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   position: absolute;
   right: 25px;
}

.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;
}

JavaScript

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });