Refactor input groups

* Deprecate .input-append and .input-prepend
* Use new, single base class for component, .input-group
* Deprecate .addon for .input-group-addon
* For compatibility with all buttons, require .input-group-btn to wrap buttons and button dropdowns
* Still need to reimplement with segmented button dropdowns, but that's dependent on a refactor of those first

docs/assets/css/bootstrap.css

@@ -1340,63 +1340,38 @@ select:focus:invalid:focus {
   vertical-align: middle;
 }
 
-.input-append,
-.input-prepend {
-  margin-bottom: 5px;
-  font-size: 0;
-  white-space: nowrap;
-}
-
-.input-append input,
-.input-prepend input,
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input,
-.input-append .dropdown-menu,
-.input-prepend .dropdown-menu {
-  font-size: 14px;
+.input-group {
+  display: table;
 }
 
-.input-append input,
-.input-prepend input,
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input {
-  position: relative;
+.input-group[class*="span"] {
   float: none;
-  margin: 0;
-  font-size: 14px;
-  vertical-align: top;
-  border-radius: 0 4px 4px 0;
+  padding: 0;
 }
 
-.input-append input:focus,
-.input-prepend input:focus,
-.input-append select:focus,
-.input-prepend select:focus,
-.input-append .uneditable-input:focus,
-.input-prepend .uneditable-input:focus {
-  z-index: 2;
+.input-group input,
+.input-group select,
+.input-group .uneditable-input {
+  width: 100%;
 }
 
-.input-append input[class*="span"],
-.input-prepend input[class*="span"],
-.input-append select[class*="span"],
-.input-prepend select[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend .uneditable-input[class*="span"] {
+.input-group-addon,
+.input-group-btn,
+.input-group input,
+.input-group .uneditable-input {
+  display: table-cell;
   margin: 0;
+  border-radius: 0;
 }
 
-.input-append .add-on,
-.input-prepend .add-on {
-  display: inline-block;
-  width: auto;
-  height: 20px;
-  min-width: 16px;
-  padding: 6px;
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle;
+}
+
+.input-group-addon {
+  padding: 6px 8px;
   font-size: 14px;
   font-weight: normal;
   line-height: 20px;
@@ -1404,244 +1379,69 @@ select:focus:invalid:focus {
   text-shadow: 0 1px 0 #fff;
   background-color: #eeeeee;
   border: 1px solid #ccc;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
-.input-append .add-on,
-.input-prepend .add-on,
-.input-append .btn,
-.input-prepend .btn,
-.input-append .btn-group > .dropdown-toggle,
-.input-prepend .btn-group > .dropdown-toggle {
-  vertical-align: top;
-  border-radius: 0;
-}
-
-.input-append .active,
-.input-prepend .active {
-  background-color: #dff0d8;
-  border-color: #468847;
-}
-
-.input-prepend .add-on,
-.input-prepend .btn {
-  margin-right: -1px;
-}
-
-.input-prepend .add-on:first-child,
-.input-prepend .btn:first-child {
-  border-radius: 4px 0 0 4px;
-}
-
-.input-append input,
-.input-append select,
-.input-append .uneditable-input {
-  border-radius: 4px 0 0 4px;
-}
-
-.input-append input + .btn-group .btn,
-.input-append select + .btn-group .btn,
-.input-append .uneditable-input + .btn-group .btn,
-.input-append input + .btn-group .btn:last-child,
-.input-append select + .btn-group .btn:last-child,
-.input-append .uneditable-input + .btn-group .btn:last-child {
-  border-radius: 0 4px 4px 0;
-}
-
-.input-append .add-on,
-.input-append .btn,
-.input-append .btn-group {
-  margin-left: -1px;
-}
-
-.input-append .add-on:last-child,
-.input-append .btn:last-child,
-.input-append .btn-group:last-child > .dropdown-toggle {
-  border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append input,
-.input-prepend.input-append select,
-.input-prepend.input-append .uneditable-input {
-  border-radius: 0;
-}
-
-.input-prepend.input-append input + .btn-group .btn,
-.input-prepend.input-append select + .btn-group .btn,
-.input-prepend.input-append .uneditable-input + .btn-group .btn {
-  border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .add-on:first-child,
-.input-prepend.input-append .btn:first-child {
-  margin-right: -1px;
-  border-radius: 4px 0 0 4px;
-}
-
-.input-prepend.input-append .add-on:last-child,
-.input-prepend.input-append .btn:last-child {
-  margin-left: -1px;
-  border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .btn-group:first-child {
-  margin-left: 0;
-}
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9;
-  /* IE8 doesn't have border radius, so don't indent the padding */
-
-  margin-bottom: 0;
-  border-radius: 20px;
-}
-
-/* Allow for input prepend/append in search forms */
-
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  border-radius: 0;
-}
-
-.form-search .input-append .search-query {
-  border-radius: 20px 0 0 20px;
-}
-
-.form-search .input-append .btn {
-  border-radius: 0 20px 20px 0;
-}
-
-.form-search .input-prepend .search-query {
-  border-radius: 0 20px 20px 0;
-}
-
-.form-search .input-prepend .btn {
-  border-radius: 20px 0 0 20px;
-}
-
-.form-search input,
-.form-inline input,
-.form-horizontal input,
-.form-search textarea,
-.form-inline textarea,
-.form-horizontal textarea,
-.form-search select,
-.form-inline select,
-.form-horizontal select,
-.form-search .help-inline,
-.form-inline .help-inline,
-.form-horizontal .help-inline,
-.form-search .uneditable-input,
-.form-inline .uneditable-input,
-.form-horizontal .uneditable-input,
-.form-search .input-prepend,
-.form-inline .input-prepend,
-.form-horizontal .input-prepend,
-.form-search .input-append,
-.form-inline .input-append,
-.form-horizontal .input-append {
-  display: inline-block;
-  margin-bottom: 0;
-  vertical-align: middle;
-}
-
-.form-search .hide,
-.form-inline .hide,
-.form-horizontal .hide {
-  display: none;
+.input-group input:first-child,
+.input-group .uneditable-input:first-child,
+.input-group-addon:first-child {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
 }
 
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
+.input-group-addon:first-child {
+  border-right: 0;
 }
 
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
+.input-group input:last-child,
+.input-group .uneditable-input:last-child,
+.input-group-addon:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-  padding-left: 0;
+.input-group-addon:last-child {
+  border-left: 0;
 }
 
-.form-search .radio label,
-.form-search .checkbox label,
-.form-inline .radio label,
-.form-inline .checkbox label {
-  margin-bottom: 0;
-  vertical-align: middle;
+.input-group-btn,
+.input-group-btn .btn {
+  white-space: nowrap;
 }
 
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
+.input-group-btn > .btn {
   float: left;
-  margin-right: 3px;
-  margin-left: 0;
-}
-
-.control-group {
-  margin-bottom: 10px;
-}
-
-legend + .control-group {
-  margin-top: 20px;
-  -webkit-margin-top-collapse: separate;
-}
-
-.form-horizontal .control-group {
-  margin-bottom: 20px;
-}
-
-.form-horizontal .control-group:before,
-.form-horizontal .control-group:after {
-  display: table;
-  line-height: 0;
-  content: "";
+  border-radius: 0;
 }
 
-.form-horizontal .control-group:after {
-  clear: both;
+.input-group-btn > .btn + .btn {
+  border-left: 0;
 }
 
-.form-horizontal .control-label {
-  float: left;
-  width: 160px;
-  padding-top: 5px;
-  text-align: right;
+.input-group-btn.btn-group {
+  display: table-cell;
 }
 
-.form-horizontal .controls {
-  margin-left: 180px;
+.input-group-btn:first-child > .btn:last-child,
+.input-group-btn.btn-group:first-child > .btn {
+  border-right: 0;
 }
 
-.form-horizontal .help-block {
-  margin-bottom: 0;
+.input-group-btn:first-child > .btn:first-child,
+.input-group-btn.btn-group:first-child > .btn {
+  border-radius: 4px 0 0 4px;
 }
 
-.form-horizontal input + .help-block,
-.form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block,
-.form-horizontal .uneditable-input + .help-block,
-.form-horizontal .input-prepend + .help-block,
-.form-horizontal .input-append + .help-block {
-  margin-top: 10px;
+.input-group-btn:last-child > .btn:first-child,
+.input-group-btn.btn-group:last-child > .btn:first-child {
+  border-left: 0;
 }
 
-.form-horizontal .form-actions {
-  padding-left: 180px;
+.input-group-btn:last-child > .btn:last-child,
+.input-group-btn.btn-group:last-child > .btn {
+  border-radius: 0 4px 4px 0;
 }
 
 table {
@@ -2753,21 +2553,22 @@ button.close {
   color: #333333;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  background-color: #f5f5f5;
-  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-color: #f0f0f0;
+  background-image: -moz-linear-gradient(top, #fafafa, #e1e1e1);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#e1e1e1));
+  background-image: -webkit-linear-gradient(top, #fafafa, #e1e1e1);
+  background-image: -o-linear-gradient(top, #fafafa, #e1e1e1);
+  background-image: linear-gradient(to bottom, #fafafa, #e1e1e1);
   background-repeat: repeat-x;
   border: 1px solid #bbbbbb;
-  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: #e1e1e1 #e1e1e1 #bababa;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   border-bottom-color: #a2a2a2;
   border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffe1e1e1', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -2779,12 +2580,12 @@ button.close {
 .btn.disabled,
 .btn[disabled] {
   color: #333333;
-  background-color: #e6e6e6;
+  background-color: #e1e1e1;
 }
 
 .btn:active,
 .btn.active {
-  background-color: #cccccc \9;
+  background-color: #c7c7c7 \9;
 }
 
 .btn:hover {
@@ -3205,7 +3006,7 @@ input[type="button"].btn-block {
 }
 
 .btn-group.open .btn.dropdown-toggle {
-  background-color: #e6e6e6;
+  background-color: #e1e1e1;
 }
 
 .btn-group.open .btn-primary.dropdown-toggle {

docs/css.html

@@ -1119,13 +1119,15 @@ For example, <code><section></code> should be wrapped as inlin
               <label class="control-label" for="inputPassword">Password</label>
               <div class="controls">
                 <input type="password" id="inputPassword" placeholder="Password">
+                <div class="checkbox">
+                  <label>
+                    <input type="checkbox"> Remember me
+                  </label>
+                </div>
               </div>
             </div>
             <div class="control-group">
               <div class="controls">
-                <label class="checkbox">
-                  <input type="checkbox"> Remember me
-                </label>
                 <button type="submit" class="btn">Sign in</button>
               </div>
             </div>
@@ -1146,9 +1148,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
   &lt;/div&gt;
   &lt;div class="control-group"&gt;
     &lt;div class="controls"&gt;
-      &lt;label class="checkbox"&gt;
-        &lt;input type="checkbox"&gt; Remember me
-      &lt;/label&gt;
+      &lt;div class="checkbox"&gt;
+        &lt;label&gt;
+          &lt;input type="checkbox"&gt; Remember me
+        &lt;/label&gt;
+      &lt;/div&gt;
       &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
     &lt;/div&gt;
   &lt;/div&gt;
@@ -1284,85 +1288,116 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3>Prepended and appended inputs</h3>
-          <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
-
-          <h4>Default options</h4>
-          <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
+          <h3>Input groups</h3>
+          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
+          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <span class="add-on">@</span>
-              <input id="prependedInput" type="text" placeholder="Username">
+            <div class="input-group span9">
+              <span class="input-group-addon">@</span>
+              <input type="text" placeholder="Username">
             </div>
             <br>
-            <div class="input-append">
-              <input id="appendedInput" type="text">
-              <span class="add-on">.00</span>
+            <div class="input-group span6">
+              <input type="text">
+              <span class="input-group-addon">.00</span>
+            </div>
+            <br>
+            <div class="input-group span3">
+              <span class="input-group-addon">$</span>
+              <input type="text">
+              <span class="input-group-addon">.00</span>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-prepend"&gt;
-  &lt;span class="add-on"&gt;@&lt;/span&gt;
-  &lt;input id="prependedInput" type="text" placeholder="Username"&gt;
+&lt;div class="input-group span9"&gt;
+  &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
+  &lt;input type="text" placeholder="Username"&gt;
 &lt;/div&gt;
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+
+&lt;div class="input-group span6"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
-</pre>
 
-          <h4>Combined</h4>
-          <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
-          <form class="bs-docs-example form-inline">
-            <div class="input-prepend input-append">
-              <span class="add-on">$</span>
-              <input id="appendedPrependedInput" type="text">
-              <span class="add-on">.00</span>
-            </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-prepend input-append"&gt;
-  &lt;span class="add-on"&gt;$&lt;/span&gt;
-  &lt;input id="appendedPrependedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+&lt;div class="input-group span3"&gt;
+  &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Buttons instead of text</h4>
-          <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
+          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButton" type="text">
-              <button class="btn" type="button">Go!</button>
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
+              <input type="text">
+            </div>
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" type="text"&gt;
-  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
+  &lt;input type="text"&gt;
+&lt;/div&gt;
+
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
 &lt;/div&gt;
 </pre>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButtons" type="text">
-              <button class="btn" type="button">Search</button>
-              <button class="btn" type="button">Options</button>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Search</button>
+                <button class="btn" type="button">Options</button>
+              </span>
+            </div>
+            <br>
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Search</button>
+                <button class="btn" type="button">Options</button>
+              </span>
+              <input type="text">
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" type="text"&gt;
-  &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
-  &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+    &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="input-group span7"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+    &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+  &lt;/span&gt;
+  &lt;input type="text"&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Button dropdowns</h4>
           <p></p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedDropdownButton" type="text">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1372,27 +1407,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-            </div><!-- /input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInputButtons" type="text"&gt;
-  &lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+              <input type="text">
+            </div><!-- /input-group -->
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1402,12 +1422,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-              <input class="span2" id="prependedDropdownButton" type="text">
-            </div><!-- /input-prepend -->
+            </div><!-- /input-group -->
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-prepend"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1416,48 +1435,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
       ...
     &lt;/ul&gt;
   &lt;/div&gt;
-  &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+  &lt;input type="text"&gt;
 &lt;/div&gt;
-</pre>
 
-          <form class="bs-docs-example">
-            <div class="input-prepend input-append">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-              <input class="span2" id="appendedPrependedDropdownButton" type="text">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-            </div><!-- /input-prepend input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-prepend input-append"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-  &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1471,8 +1454,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 
           <h4>Segmented dropdown groups</h4>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1487,9 +1470,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
               </div>
               <input type="text" class="span3">
             </div>
-            <div class="input-append">
-              <input type="text" class="span3">
-              <div class="btn-group">
+
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1505,16 +1489,14 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;form&gt;
-  &lt;div class="input-prepend"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-    &lt;input type="text" class="span3"&gt;
-  &lt;/div&gt;
-  &lt;div class="input-append"&gt;
-    &lt;input type="text" class="span3"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
+&lt;div class="input-prepend"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;input type="text" class="span3"&gt;
+&lt;/div&gt;
+&lt;div class="input-append"&gt;
+  &lt;input type="text" class="span3"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+&lt;/div&gt;
 </pre>
 
           <h4>Search form</h4>

docs/templates/pages/css.mustache

@@ -1059,13 +1059,15 @@ For example, <code><section></code> should be wrapped as inlin
               <label class="control-label" for="inputPassword">Password</label>
               <div class="controls">
                 <input type="password" id="inputPassword" placeholder="Password">
+                <div class="checkbox">
+                  <label>
+                    <input type="checkbox"> Remember me
+                  </label>
+                </div>
               </div>
             </div>
             <div class="control-group">
               <div class="controls">
-                <label class="checkbox">
-                  <input type="checkbox"> Remember me
-                </label>
                 <button type="submit" class="btn">Sign in</button>
               </div>
             </div>
@@ -1086,9 +1088,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
   &lt;/div&gt;
   &lt;div class="control-group"&gt;
     &lt;div class="controls"&gt;
-      &lt;label class="checkbox"&gt;
-        &lt;input type="checkbox"&gt; Remember me
-      &lt;/label&gt;
+      &lt;div class="checkbox"&gt;
+        &lt;label&gt;
+          &lt;input type="checkbox"&gt; Remember me
+        &lt;/label&gt;
+      &lt;/div&gt;
       &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
     &lt;/div&gt;
   &lt;/div&gt;
@@ -1224,85 +1228,116 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3>Prepended and appended inputs</h3>
-          <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
-
-          <h4>Default options</h4>
-          <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
+          <h3>Input groups</h3>
+          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
+          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <span class="add-on">@</span>
-              <input id="prependedInput" type="text" placeholder="Username">
+            <div class="input-group span9">
+              <span class="input-group-addon">@</span>
+              <input type="text" placeholder="Username">
             </div>
             <br>
-            <div class="input-append">
-              <input id="appendedInput" type="text">
-              <span class="add-on">.00</span>
+            <div class="input-group span6">
+              <input type="text">
+              <span class="input-group-addon">.00</span>
+            </div>
+            <br>
+            <div class="input-group span3">
+              <span class="input-group-addon">$</span>
+              <input type="text">
+              <span class="input-group-addon">.00</span>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-prepend"&gt;
-  &lt;span class="add-on"&gt;@&lt;/span&gt;
-  &lt;input id="prependedInput" type="text" placeholder="Username"&gt;
+&lt;div class="input-group span9"&gt;
+  &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
+  &lt;input type="text" placeholder="Username"&gt;
 &lt;/div&gt;
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+
+&lt;div class="input-group span6"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
-</pre>
 
-          <h4>Combined</h4>
-          <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
-          <form class="bs-docs-example form-inline">
-            <div class="input-prepend input-append">
-              <span class="add-on">$</span>
-              <input id="appendedPrependedInput" type="text">
-              <span class="add-on">.00</span>
-            </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-prepend input-append"&gt;
-  &lt;span class="add-on"&gt;$&lt;/span&gt;
-  &lt;input id="appendedPrependedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+&lt;div class="input-group span3"&gt;
+  &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Buttons instead of text</h4>
-          <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
+          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButton" type="text">
-              <button class="btn" type="button">Go!</button>
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
+              <input type="text">
+            </div>
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" type="text"&gt;
-  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
+  &lt;input type="text"&gt;
+&lt;/div&gt;
+
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
 &lt;/div&gt;
 </pre>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButtons" type="text">
-              <button class="btn" type="button">Search</button>
-              <button class="btn" type="button">Options</button>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Search</button>
+                <button class="btn" type="button">Options</button>
+              </span>
+            </div>
+            <br>
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Search</button>
+                <button class="btn" type="button">Options</button>
+              </span>
+              <input type="text">
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" type="text"&gt;
-  &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
-  &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+    &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="input-group span7"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+    &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+  &lt;/span&gt;
+  &lt;input type="text"&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Button dropdowns</h4>
           <p></p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedDropdownButton" type="text">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1312,27 +1347,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-            </div><!-- /input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInputButtons" type="text"&gt;
-  &lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+              <input type="text">
+            </div><!-- /input-group -->
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1342,12 +1362,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-              <input class="span2" id="prependedDropdownButton" type="text">
-            </div><!-- /input-prepend -->
+            </div><!-- /input-group -->
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-prepend"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1356,48 +1375,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
       ...
     &lt;/ul&gt;
   &lt;/div&gt;
-  &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+  &lt;input type="text"&gt;
 &lt;/div&gt;
-</pre>
 
-          <form class="bs-docs-example">
-            <div class="input-prepend input-append">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-              <input class="span2" id="appendedPrependedDropdownButton" type="text">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-            </div><!-- /input-prepend input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-prepend input-append"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-  &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1411,8 +1394,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 
           <h4>Segmented dropdown groups</h4>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1427,9 +1410,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
               </div>
               <input type="text" class="span3">
             </div>
-            <div class="input-append">
-              <input type="text" class="span3">
-              <div class="btn-group">
+
+            <br>
+
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1445,16 +1431,14 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;form&gt;
-  &lt;div class="input-prepend"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-    &lt;input type="text" class="span3"&gt;
-  &lt;/div&gt;
-  &lt;div class="input-append"&gt;
-    &lt;input type="text" class="span3"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
+&lt;div class="input-prepend"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;input type="text" class="span3"&gt;
+&lt;/div&gt;
+&lt;div class="input-append"&gt;
+  &lt;input type="text" class="span3"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+&lt;/div&gt;
 </pre>
 
           <h4>Search form</h4>

less/buttons.less

@@ -16,6 +16,7 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
+  white-space: nowrap;
   .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
   border: 1px solid @btn-border;
   border-bottom-color: darken(@btn-border, 10%);

less/forms.less

@@ -421,273 +421,112 @@ select:focus:invalid {
 
 
 
-// INPUT GROUPS
-// ------------
-
-// Allow us to put symbols and text within the input field for a cleaner look
-.input-append,
-.input-prepend {
-  margin-bottom: 5px;
-  font-size: 0; // white space collapse hack
-  white-space: nowrap; // Prevent span and input from separating
 
-  // Reset the white space collapse hack
-  input,
-  select,
-  .uneditable-input,
-  .dropdown-menu {
-    font-size: @font-size-base;
-  }
+// Input groups
+// --------------------------------------------------
 
-  input,
-  select,
-  .uneditable-input {
-    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
-    float: none; // Undo the float from grid sizing
-    margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
-    font-size: @font-size-base;
-    vertical-align: top;
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-    // Make input on top when focused so blue border and shadow always show
-    &:focus {
-      z-index: 2;
-    }
-  }
-  input[class*="span"],
-  select[class*="span"],
-  .uneditable-input[class*="span"] {
-    margin: 0;
-  }
-  .add-on {
-    display: inline-block;
-    width: auto;
-    height: @line-height-base;
-    min-width: 16px;
-    padding: 6px;
-    font-size: @font-size-base;
-    font-weight: normal;
-    line-height: @line-height-base;
-    text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    background-color: @grayLighter;
-    border: 1px solid #ccc;
-  }
-  .add-on,
-  .btn,
-  .btn-group > .dropdown-toggle {
-    vertical-align: top;
-    border-radius: 0;
-  }
-  .active {
-    background-color: @state-success-background;
-    border-color: @state-success-text;
-  }
-}
+// Base styles
+// -------------------------
+.input-group {
+  display: table;
 
-.input-prepend {
-  .add-on,
-  .btn {
-    margin-right: -1px;
+  // Undo padding and float of grid classes
+  &[class*="span"] {
+    float: none;
+    padding: 0;
   }
-  .add-on:first-child,
-  .btn:first-child {
-    // FYI, `.btn:first-child` accounts for a button group that's prepended
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-  }
-}
 
-.input-append {
   input,
   select,
   .uneditable-input {
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-    + .btn-group .btn,
-    + .btn-group .btn:last-child {
-      border-radius: 0 @input-border-radius @input-border-radius 0;
-    }
-  }
-  .add-on,
-  .btn,
-  .btn-group {
-    margin-left: -1px;
-  }
-  .add-on:last-child,
-  .btn:last-child,
-  .btn-group:last-child > .dropdown-toggle {
-    border-radius: 0 @input-border-radius @input-border-radius 0;
+    width: 100%;
   }
 }
 
-// Remove all border-radius for inputs with both prepend and append
-.input-prepend.input-append {
-  input,
-  select,
-  .uneditable-input {
-    border-radius: 0;
-    + .btn-group .btn {
-      border-radius: 0 @input-border-radius @input-border-radius 0;
-    }
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    margin-right: -1px;
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-  }
-  .add-on:last-child,
-  .btn:last-child {
-    margin-left: -1px;
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-  }
-  .btn-group:first-child {
-    margin-left: 0;
-  }
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group input,
+.input-group .uneditable-input {
+  display: table-cell;
+  margin: 0;
+  border-radius: 0;
 }
-
-
-
-
-// SEARCH FORM
-// -----------
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
-  margin-bottom: 0; // Remove the default margin on all inputs
-  border-radius: @input-border-radius-search;
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle; // Match the inputs
 }
 
-/* Allow for input prepend/append in search forms */
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  border-radius: 0; // Override due to specificity
+// Text input groups
+// -------------------------
+.input-group-addon {
+  .box-sizing(border-box);
+  padding: 6px 8px;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: @line-height-base;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  background-color: @grayLighter;
+  border: 1px solid #ccc;
 }
-.form-search .input-append .search-query {
-  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
+
+// Reset rounded corners
+.input-group input:first-child,
+.input-group .uneditable-input:first-child,
+.input-group-addon:first-child {
+  .border-left-radius(@border-radius-base);
 }
-.form-search .input-append .btn {
-  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
+.input-group-addon:first-child {
+  border-right: 0;
 }
-.form-search .input-prepend .search-query {
-  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
+.input-group input:last-child,
+.input-group .uneditable-input:last-child,
+.input-group-addon:last-child {
+  .border-right-radius(@border-radius-base);
 }
-.form-search .input-prepend .btn {
-  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
+.input-group-addon:last-child {
+  border-left: 0;
 }
 
-
-
-
-// HORIZONTAL & VERTICAL FORMS
-// ---------------------------
-
-// Common properties
-// -----------------
-
-.form-search,
-.form-inline,
-.form-horizontal {
-  input,
-  textarea,
-  select,
-  .help-inline,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  // Re-hide hidden elements due to specifity
-  .hide {
-    display: none;
-  }
-}
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
-}
-// Remove margin for input-prepend/-append
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
+// Button input groups
+// -------------------------
+.input-group-btn,
+.input-group-btn .btn {
+  white-space: nowrap;
 }
-// Inline checkbox/radio labels (remove padding on left)
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-  padding-left: 0;
-  label {
-    margin-bottom: 0;
-    vertical-align: middle;
+.input-group-btn > .btn {
+  float: left; // Collapse white-space
+  border-radius: 0;
+  + .btn {
+    border-left: 0;
   }
 }
-// Remove float and margin, set to inline-block
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-  float: left;
-  margin-right: 3px;
-  margin-left: 0;
-}
-
-
-// Margin to space out fieldsets
-.control-group {
-  margin-bottom: @line-height-base / 2;
-}
-
-// Legend collapses margin, so next element is responsible for spacing
-legend + .control-group {
-  margin-top: @line-height-base;
-  -webkit-margin-top-collapse: separate;
+.input-group-btn.btn-group {
+  display: table-cell;
 }
-
-// Horizontal-specific styles
-// --------------------------
-
-.form-horizontal {
-  // Increase spacing between groups
-  .control-group {
-    margin-bottom: @line-height-base;
-    .clearfix();
-  }
-  // Float the labels left
-  .control-label {
-    float: left;
-    width: @component-offset-horizontal - 20;
-    padding-top: 5px;
-    text-align: right;
+// Prepend
+.input-group-btn {
+  &:first-child > .btn:last-child,
+  &.btn-group:first-child > .btn {
+    border-right: 0;
   }
-  // Move over all input controls and content
-  .controls {
-    margin-left: @component-offset-horizontal;
+  &:first-child > .btn:first-child,
+  &.btn-group:first-child > .btn {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
   }
-  // Remove bottom margin on block level help text since that's accounted for on .control-group
-  .help-block {
-    margin-bottom: 0;
-  }
-  // And apply it only to .help-block instances that follow a form control
-  input,
-  select,
-  textarea,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    + .help-block {
-      margin-top: @line-height-base / 2;
-    }
+}
+// Append
+.input-group-btn {
+  &:last-child > .btn:first-child,
+  &.btn-group:last-child > .btn:first-child {
+    border-left: 0;
   }
-  // Move over buttons in .form-actions to align with .controls
-  .form-actions {
-    padding-left: @component-offset-horizontal;
+  &:last-child > .btn:last-child,
+  &.btn-group:last-child > .btn {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
   }
 }

less/variables.less

@@ -76,8 +76,8 @@
 // Buttons
 // -------------------------
 
-@btn-background:                     #fff;
-@btn-background-highlight:           darken(#fff, 10%);
+@btn-background:                     #fafafa;
+@btn-background-highlight:           darken(@btn-background, 10%);
 @btn-border:                         #bbb;
 
 @btn-backround-primary:              @link-color;