// Normalize non-controls // // Restyle and baseline non-control form elements. fieldset { padding: 0; margin: 0; border: 0; // Chrome and Firefox set a `min-width: min-content;` on fieldsets, // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: $line-height-computed; font-size: ($font-size-base * 1.5); line-height: inherit; color: $legend-color; border: 0; border-bottom: 1px solid $legend-border-color; } // Normalize form controls // // While most of our form styles require extra classes, some basic normalization // is required to ensure optimum display with or without those classes to better // address browser inconsistencies. // Override content-box in Normalize (* isn't specific enough) input[type="search"], input[type="search"].form-control { @include box-sizing(border-box); } // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px \9; // IE8-9 line-height: normal; } input[type="file"] { display: block; } // Make range inputs behave like textual form controls input[type="range"] { display: block; width: 100%; } // Focus for file, radio, and checkbox input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { @include tab-focus; } // Adjust output element output { display: block; padding-top: ($padding-base-vertical + 1); font-size: $font-size-base; line-height: $line-height-base; color: $gray-9; } // Reset height for `textarea`s textarea.form-control { height: auto; } // Search inputs in iOS // // This overrides the extra rounded corners on search inputs in iOS so that our // `.form-control` class can properly style them. Note that this cannot simply // be added to `.form-control` as it's not specific enough. For details, see // https://github.com/twbs/bootstrap/issues/11586. input[type="search"] { -webkit-appearance: none; } // Special styles for iOS temporal inputs // // In Mobile Safari, setting `display: block` on temporal inputs causes the // text within the input to become vertically misaligned. As a workaround, we // set a pixel line-height that matches the given height of the input, but only // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 // // Note that as of 8.3, iOS doesn't support `datetime` or `week`. @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { &.form-control { line-height: $input-height-base; } &.input-sm, .input-group-sm & { line-height: $input-height-small; } &.input-lg, .input-group-lg & { line-height: $input-height-large; } } }