AutorÃa | Ultima modificación | Ver Log |
//// General form controls (plus a few specific high-level interventions)//.form-control {display: block;width: 100%;padding: $input-padding-y $input-padding-x;font-family: $input-font-family;@include font-size($input-font-size);font-weight: $input-font-weight;line-height: $input-line-height;color: $input-color;appearance: none; // Fix appearance for date inputs in Safaribackground-color: $input-bg;background-clip: padding-box;border: $input-border-width solid $input-border-color;// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.@include border-radius($input-border-radius, 0);@include box-shadow($input-box-shadow);@include transition($input-transition);&[type="file"] {overflow: hidden; // prevent pseudo element button overlap&:not(:disabled):not([readonly]) {cursor: pointer;}}// Customize the `:focus` state to imitate native WebKit styles.&:focus {color: $input-focus-color;background-color: $input-focus-bg;border-color: $input-focus-border-color;outline: 0;@if $enable-shadows {@include box-shadow($input-box-shadow, $input-focus-box-shadow);} @else {// Avoid using mixin so we can pass custom focus shadow properlybox-shadow: $input-focus-box-shadow;}}&::-webkit-date-and-time-value {// On Android Chrome, form-control's "width: 100%" makes the input width too small// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109//// On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small// Tested under iOS 16.2 / Safari 16.2min-width: 85px; // Seems to be a good minimum safe width// Add some height to date inputs on iOS// https://github.com/twbs/bootstrap/issues/23307// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved// Multiply line-height by 1em if it has no unitheight: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);// Android Chrome type="date" is taller than the other inputs// because of "margin: 1px 24px 1px 4px" inside the shadow DOM// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109margin: 0;}// Prevent excessive date input height in Webkit// https://github.com/twbs/bootstrap/issues/34433&::-webkit-datetime-edit {display: block;padding: 0;}// Placeholder&::placeholder {color: $input-placeholder-color;// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.opacity: 1;}// Disabled inputs//// HTML5 says that controls under a fieldset > legend:first-child won't be// disabled if the fieldset is disabled. Due to implementation difficulty, we// don't honor that edge case; we style them as disabled anyway.&:disabled {color: $input-disabled-color;background-color: $input-disabled-bg;border-color: $input-disabled-border-color;// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.opacity: 1;}// File input buttons theming&::file-selector-button {padding: $input-padding-y $input-padding-x;margin: (-$input-padding-y) (-$input-padding-x);margin-inline-end: $input-padding-x;color: $form-file-button-color;@include gradient-bg($form-file-button-bg);pointer-events: none;border-color: inherit;border-style: solid;border-width: 0;border-inline-end-width: $input-border-width;border-radius: 0; // stylelint-disable-line property-disallowed-list@include transition($btn-transition);}&:hover:not(:disabled):not([readonly])::file-selector-button {background-color: $form-file-button-hover-bg;}}// Readonly controls as plain text//// Apply class to a readonly input to make it appear like regular plain// text (without any border, background color, focus indicator).form-control-plaintext {display: block;width: 100%;padding: $input-padding-y 0;margin-bottom: 0; // match inputs if this class comes on inputs with default marginsline-height: $input-line-height;color: $input-plaintext-color;background-color: transparent;border: solid transparent;border-width: $input-border-width 0;&:focus {outline: 0;}&.form-control-sm,&.form-control-lg {padding-right: 0;padding-left: 0;}}// Form control sizing//// Build on `.form-control` with modifier classes to decrease or increase the// height and font-size of form controls.//// Repeated in `_input_group.scss` to avoid Sass extend issues..form-control-sm {min-height: $input-height-sm;padding: $input-padding-y-sm $input-padding-x-sm;@include font-size($input-font-size-sm);@include border-radius($input-border-radius-sm);&::file-selector-button {padding: $input-padding-y-sm $input-padding-x-sm;margin: (-$input-padding-y-sm) (-$input-padding-x-sm);margin-inline-end: $input-padding-x-sm;}}.form-control-lg {min-height: $input-height-lg;padding: $input-padding-y-lg $input-padding-x-lg;@include font-size($input-font-size-lg);@include border-radius($input-border-radius-lg);&::file-selector-button {padding: $input-padding-y-lg $input-padding-x-lg;margin: (-$input-padding-y-lg) (-$input-padding-x-lg);margin-inline-end: $input-padding-x-lg;}}// Make sure textareas don't shrink too much when resized// https://github.com/twbs/bootstrap/pull/29124// stylelint-disable selector-no-qualifying-typetextarea {&.form-control {min-height: $input-height;}&.form-control-sm {min-height: $input-height-sm;}&.form-control-lg {min-height: $input-height-lg;}}// stylelint-enable selector-no-qualifying-type.form-control-color {width: $form-color-width;height: $input-height;padding: $input-padding-y;&:not(:disabled):not([readonly]) {cursor: pointer;}&::-moz-color-swatch {border: 0 !important; // stylelint-disable-line declaration-no-important@include border-radius($input-border-radius);}&::-webkit-color-swatch {border: 0 !important; // stylelint-disable-line declaration-no-important@include border-radius($input-border-radius);}&.form-control-sm { height: $input-height-sm; }&.form-control-lg { height: $input-height-lg; }}