3 // --------------------------------------------------
6 // Normalize non-controls
8 // Restyle and baseline non-control form elements.
20 margin-bottom: @line-height-computed;
21 font-size: (@font-size-base * 1.5);
25 border-bottom: 1px solid @legend-border-color;
29 display: inline-block;
35 // Normalize form controls
37 // Override content-box in Normalize (* isn't specific enough)
38 input[type="search"] {
39 .box-sizing(border-box);
42 // Position radios and checkboxes better
44 input[type="checkbox"] {
46 margin-top: 1px \9; /* IE8-9 */
50 // Set the height of select and file controls to match text inputs
55 // Make multiple select elements height not fixed
61 // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
68 // Focus for select, file, radio, and checkbox
69 input[type="file"]:focus,
70 input[type="radio"]:focus,
71 input[type="checkbox"]:focus {
75 // Fix for Chrome number input
76 // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
77 // See https://github.com/twbs/bootstrap/issues/8350 for more.
78 input[type="number"] {
79 &::-webkit-outer-spin-button,
80 &::-webkit-inner-spin-button {
85 // Adjust output element
88 padding-top: (@padding-base-vertical + 1);
89 font-size: @font-size-base;
90 line-height: @line-height-base;
92 vertical-align: middle;
97 // Placeholder text gets special styles because when browsers invalidate entire
98 // lines if it doesn't understand a selector/
104 // Common form controls
106 // Shared size and type resets for form controls. Apply `.form-control` to any
107 // of the following form controls:
111 // input[type="text"]
112 // input[type="password"]
113 // input[type="datetime"]
114 // input[type="datetime-local"]
115 // input[type="date"]
116 // input[type="month"]
117 // input[type="time"]
118 // input[type="week"]
119 // input[type="number"]
120 // input[type="email"]
122 // input[type="search"]
124 // input[type="color"]
129 height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
130 padding: @padding-base-vertical @padding-base-horizontal;
131 font-size: @font-size-base;
132 line-height: @line-height-base;
134 vertical-align: middle;
135 background-color: @input-bg;
136 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
137 border: 1px solid @input-border;
138 border-radius: @input-border-radius;
139 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
140 .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
142 // Customize the `:focus` state to imitate native WebKit styles.
143 .form-control-focus();
145 // Disabled and read-only inputs
146 // Note: HTML5 says that controls under a fieldset > legend:first-child won't
147 // be disabled if the fieldset is disabled. Due to implementation difficulty,
148 // we don't honor that edge case; we style them as disabled anyway.
151 fieldset[disabled] & {
153 background-color: @input-bg-disabled;
156 // Reset height for `textarea`s
165 // Designed to help with the organization and spacing of vertical forms. For
166 // horizontal forms, use the predefined grid classes.
173 // Checkboxes and radios
175 // Indent the labels to position radios/checkboxes as hanging controls.
180 min-height: @line-height-computed; // clear the floating input if there is no label text
184 vertical-align: middle;
192 .radio input[type="radio"],
193 .radio-inline input[type="radio"],
194 .checkbox input[type="checkbox"],
195 .checkbox-inline input[type="checkbox"] {
200 .checkbox + .checkbox {
201 margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
204 // Radios and checkboxes on same line
207 display: inline-block;
210 vertical-align: middle;
214 .radio-inline + .radio-inline,
215 .checkbox-inline + .checkbox-inline {
217 margin-left: 10px; // space out consecutive inline controls
220 // Apply same disabled cursor tweak as for inputs
222 // Note: Neither radios nor checkboxes can be readonly.
224 input[type="checkbox"],
230 fieldset[disabled] & {
235 // Form control sizing
237 .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
241 .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
245 // Form control feedback states
247 // Apply contextual and semantic states to individual form controls.
251 .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
255 .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
259 .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
263 // Static form control text
265 // Apply class to a `p` element to make any string of text align with labels in
266 // a horizontal form layout.
268 .form-control-static {
269 margin-bottom: 0; // Remove default margin from `p`
275 // Apply to any element you wish to create light text for placement immediately
276 // below a form control. Use for general help, formatting, or instructional text.
279 display: block; // account for any element using help-block
282 color: lighten(@text-color, 25%); // lighten the text some for contrast
289 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
290 // forms begin stacked on extra small (mobile) devices and then go inline when
291 // viewports reach <768px.
293 // Requires wrapping inputs and labels with `.form-group` for proper display of
294 // default HTML form controls and our custom form controls (e.g., input groups).
296 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
300 // Kick in the inline
301 @media (min-width: @screen-sm) {
302 // Inline-block all the things for "inline"
304 display: inline-block;
306 vertical-align: middle;
309 // In navbar-form, allow folks to *not* use `.form-group`
311 display: inline-block;
314 // Remove default margin on radios/checkboxes that were used for stacking, and
315 // then undo the floating of radios and checkboxes to match (which also avoids
316 // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
319 display: inline-block;
324 .radio input[type="radio"],
325 .checkbox input[type="checkbox"] {
335 // Horizontal forms are built on grid classes and allow you to create forms with
336 // labels on the left and inputs on the right.
340 // Consistent vertical alignment of labels, radios, and checkboxes
348 padding-top: (@padding-base-vertical + 1); // Default padding plus a border
351 // Make form groups behave like rows
356 .form-control-static {
357 padding-top: (@padding-base-vertical + 1);
360 // Only right align form labels here when the columns stop stacking
361 @media (min-width: @screen-sm-min) {