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;
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 {
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);
.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 {
}
.btn-group.open .btn.dropdown-toggle {
- background-color: #e6e6e6;
+ background-color: #e1e1e1;
}
.btn-group.open .btn-primary.dropdown-toggle {
<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>
</div>
<div class="control-group">
<div class="controls">
- <label class="checkbox">
- <input type="checkbox"> Remember me
- </label>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
<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><input></code>.</p>
+ <p>Avoid using <code><select></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">
-<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>
-<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>
-</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">
-<div class="input-prepend input-append">
- <span class="add-on">$</span>
- <input id="appendedPrependedInput" type="text">
- <span class="add-on">.00</span>
+<div class="input-group span3">
+ <span class="input-group-addon">$</span>
+ <input type="text">
+ <span class="input-group-addon">.00</span>
</div>
</pre>
<h4>Buttons instead of text</h4>
- <p>Instead of a <code><span></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">
-<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>
+
+<div class="input-group span7">
+ <input type="text">
+ <span class="input-group-btn">
+ <button class="btn" type="button">Go!</button>
+ </span>
</div>
</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">
-<div class="input-append">
- <input class="span3" id="appendedInputButton" 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>
+
+<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>
</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>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- </div><!-- /input-append -->
- </form>
-<pre class="prettyprint linenums">
-<div class="input-append">
- <input id="appendedInputButtons" type="text">
- <input class="span3" 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>
-</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>
<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">
-<div class="input-prepend">
- <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>
...
</ul>
</div>
- <input class="span2" id="prependedDropdownButton" type="text">
+ <input type="text">
</div>
-</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">
-<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">
- ...
- </ul>
- </div>
- <input class="span2" id="appendedPrependedDropdownButton" type="text">
- <div class="btn-group">
+<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>
<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>
</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>
</div>
</form>
<pre class="prettyprint linenums">
-<form>
- <div class="input-prepend">
- <div class="btn-group">...</div>
- <input type="text" class="span3">
- </div>
- <div class="input-append">
- <input type="text" class="span3">
- <div class="btn-group">...</div>
- </div>
-</form>
+<div class="input-prepend">
+ <div class="btn-group">...</div>
+ <input type="text" class="span3">
+</div>
+<div class="input-append">
+ <input type="text" class="span3">
+ <div class="btn-group">...</div>
+</div>
</pre>
<h4>Search form</h4>
<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>
</div>
<div class="control-group">
<div class="controls">
- <label class="checkbox">
- <input type="checkbox"> Remember me
- </label>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
<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><input></code>.</p>
+ <p>Avoid using <code><select></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">
-<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>
-<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>
-</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">
-<div class="input-prepend input-append">
- <span class="add-on">$</span>
- <input id="appendedPrependedInput" type="text">
- <span class="add-on">.00</span>
+<div class="input-group span3">
+ <span class="input-group-addon">$</span>
+ <input type="text">
+ <span class="input-group-addon">.00</span>
</div>
</pre>
<h4>Buttons instead of text</h4>
- <p>Instead of a <code><span></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">
-<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>
+
+<div class="input-group span7">
+ <input type="text">
+ <span class="input-group-btn">
+ <button class="btn" type="button">Go!</button>
+ </span>
</div>
</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">
-<div class="input-append">
- <input class="span3" id="appendedInputButton" 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>
+
+<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>
</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>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- </div><!-- /input-append -->
- </form>
-<pre class="prettyprint linenums">
-<div class="input-append">
- <input id="appendedInputButtons" type="text">
- <input class="span3" 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>
-</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>
<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">
-<div class="input-prepend">
- <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>
...
</ul>
</div>
- <input class="span2" id="prependedDropdownButton" type="text">
+ <input type="text">
</div>
-</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">
-<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">
- ...
- </ul>
- </div>
- <input class="span2" id="appendedPrependedDropdownButton" type="text">
- <div class="btn-group">
+<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>
<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>
</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>
</div>
</form>
<pre class="prettyprint linenums">
-<form>
- <div class="input-prepend">
- <div class="btn-group">...</div>
- <input type="text" class="span3">
- </div>
- <div class="input-append">
- <input type="text" class="span3">
- <div class="btn-group">...</div>
- </div>
-</form>
+<div class="input-prepend">
+ <div class="btn-group">...</div>
+ <input type="text" class="span3">
+</div>
+<div class="input-append">
+ <input type="text" class="span3">
+ <div class="btn-group">...</div>
+</div>
</pre>
<h4>Search form</h4>
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%);
-// 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;
}
}
// 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;
projects / thirdparty / bootstrap.git / commitdiff
