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 file controls to match text inputs
55 // Make range inputs behave like textual form controls
61 // Make multiple select elements height not fixed
67 // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
74 // Focus for file, radio, and checkbox
75 input[type="file"]:focus,
76 input[type="radio"]:focus,
77 input[type="checkbox"]:focus {
81 // Fix for Chrome number input
82 // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
83 // See https://github.com/twbs/bootstrap/issues/8350 for more.
84 input[type="number"] {
85 &::-webkit-outer-spin-button,
86 &::-webkit-inner-spin-button {
91 // Adjust output element
94 padding-top: (@padding-base-vertical + 1);
95 font-size: @font-size-base;
96 line-height: @line-height-base;
101 // Common form controls
103 // Shared size and type resets for form controls. Apply `.form-control` to any
104 // of the following form controls:
108 // input[type="text"]
109 // input[type="password"]
110 // input[type="datetime"]
111 // input[type="datetime-local"]
112 // input[type="date"]
113 // input[type="month"]
114 // input[type="time"]
115 // input[type="week"]
116 // input[type="number"]
117 // input[type="email"]
119 // input[type="search"]
121 // input[type="color"]
126 height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
127 padding: @padding-base-vertical @padding-base-horizontal;
128 font-size: @font-size-base;
129 line-height: @line-height-base;
131 background-color: @input-bg;
132 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
133 border: 1px solid @input-border;
134 border-radius: @input-border-radius;
135 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
136 .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
138 // Customize the `:focus` state to imitate native WebKit styles.
139 .form-control-focus();
143 // Placeholder text gets special styles because when browsers invalidate entire
144 // lines if it doesn't understand a selector/
147 // Disabled and read-only inputs
148 // Note: HTML5 says that controls under a fieldset > legend:first-child won't
149 // be disabled if the fieldset is disabled. Due to implementation difficulty,
150 // we don't honor that edge case; we style them as disabled anyway.
153 fieldset[disabled] & {
155 background-color: @input-bg-disabled;
158 // Reset height for `textarea`s
164 // Special styles for iOS date input
166 // In Mobile Safari, date inputs require a pixel line-height that matches the
167 // given height of the input.
169 line-height: @input-height-base;
175 // Designed to help with the organization and spacing of vertical forms. For
176 // horizontal forms, use the predefined grid classes.
183 // Checkboxes and radios
185 // Indent the labels to position radios/checkboxes as hanging controls.
190 min-height: @line-height-computed; // clear the floating input if there is no label text
200 .radio input[type="radio"],
201 .radio-inline input[type="radio"],
202 .checkbox input[type="checkbox"],
203 .checkbox-inline input[type="checkbox"] {
208 .checkbox + .checkbox {
209 margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
212 // Radios and checkboxes on same line
215 display: inline-block;
218 vertical-align: middle;
222 .radio-inline + .radio-inline,
223 .checkbox-inline + .checkbox-inline {
225 margin-left: 10px; // space out consecutive inline controls
228 // Apply same disabled cursor tweak as for inputs
230 // Note: Neither radios nor checkboxes can be readonly.
232 input[type="checkbox"],
238 fieldset[disabled] & {
244 // Form control sizing
246 // Build on `.form-control` with modifier classes to decrease or increase the
247 // height and font-size of form controls.
250 .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
254 .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
258 // Form control feedback states
260 // Apply contextual and semantic states to individual form controls.
263 // Enable absolute positioning
266 // Ensure icons don't overlap text
268 padding-right: (@input-height-base * 1.25);
271 // Feedback icon (requires .glyphicon classes)
272 .form-control-feedback {
274 top: (@line-height-computed + 5); // Height of the `label` and its margin
277 width: @input-height-base;
278 height: @input-height-base;
279 line-height: @input-height-base;
286 .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
289 .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
292 .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
296 // Static form control text
298 // Apply class to a `p` element to make any string of text align with labels in
299 // a horizontal form layout.
301 .form-control-static {
302 margin-bottom: 0; // Remove default margin from `p`
308 // Apply to any element you wish to create light text for placement immediately
309 // below a form control. Use for general help, formatting, or instructional text.
312 display: block; // account for any element using help-block
315 color: lighten(@text-color, 25%); // lighten the text some for contrast
322 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
323 // forms begin stacked on extra small (mobile) devices and then go inline when
324 // viewports reach <768px.
326 // Requires wrapping inputs and labels with `.form-group` for proper display of
327 // default HTML form controls and our custom form controls (e.g., input groups).
329 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
333 // Kick in the inline
334 @media (min-width: @screen-sm-min) {
335 // Inline-block all the things for "inline"
337 display: inline-block;
339 vertical-align: middle;
342 // In navbar-form, allow folks to *not* use `.form-group`
344 display: inline-block;
345 width: auto; // Prevent labels from stacking above inputs in `.form-group`
346 vertical-align: middle;
351 vertical-align: middle;
354 // Remove default margin on radios/checkboxes that were used for stacking, and
355 // then undo the floating of radios and checkboxes to match (which also avoids
356 // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
359 display: inline-block;
363 vertical-align: middle;
365 .radio input[type="radio"],
366 .checkbox input[type="checkbox"] {
373 // Reposition the icon because it's now within a grid column and columns have
374 // `position: relative;` on them. Also accounts for the grid gutter padding.
375 .has-feedback .form-control-feedback {
384 // Horizontal forms are built on grid classes and allow you to create forms with
385 // labels on the left and inputs on the right.
389 // Consistent vertical alignment of labels, radios, and checkboxes
397 padding-top: (@padding-base-vertical + 1); // Default padding plus a border
399 // Account for padding we're adding to ensure the alignment and of help text
400 // and other content below items
403 min-height: (@line-height-computed + (@padding-base-vertical + 1));
406 // Make form groups behave like rows
411 .form-control-static {
412 padding-top: (@padding-base-vertical + 1);
415 // Only right align form labels here when the columns stop stacking
416 @media (min-width: @screen-sm-min) {
424 // Reposition the icon because it's now within a grid column and columns have
425 // `position: relative;` on them. Also accounts for the grid gutter padding.
426 .has-feedback .form-control-feedback {
428 right: (@grid-gutter-width / 2);