1 // stylelint-disable selector-no-qualifying-type
10 flex-wrap: wrap; // For form validation feedback
15 > .form-control-plaintext,
18 position: relative; // For focus state's z-index
20 // Add width 1% and flex-basis auto to ensure that button will not wrap out
21 // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
28 margin-left: -$input-border-width;
32 // Bring the "active" form control to the top of surrounding elements
33 > .form-control:focus,
34 > .custom-select:focus,
35 > .custom-file .custom-file-input:focus ~ .custom-file-label {
39 // Bring the custom file input above the label
40 > .custom-file .custom-file-input:focus {
46 &:not(:last-child) { @include border-right-radius(0); }
47 &:not(:first-child) { @include border-left-radius(0); }
50 // Custom file inputs have more complex markup, thus requiring different
51 // border-radius overrides.
56 &:not(:last-child) .custom-file-label,
57 &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
58 &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
65 // While it requires one extra layer of HTML for each, dedicated prepend and
66 // append elements allow us to 1) be less clever, 2) simplify our selectors, and
67 // 3) support HTML5 form validation.
73 // Ensure buttons are always above inputs for more visually pleasing borders.
74 // This isn't needed for `.input-group-text` since it shares the same border-color
86 .btn + .input-group-text,
87 .input-group-text + .input-group-text,
88 .input-group-text + .btn {
89 margin-left: -$input-border-width;
93 .input-group-prepend { margin-right: -$input-border-width; }
94 .input-group-append { margin-left: -$input-border-width; }
99 // Serves as a catch-all element for any text or radio/checkbox input you wish
100 // to prepend or append to an input.
105 padding: $input-padding-y $input-padding-x;
106 margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
107 font-size: $font-size-base; // Match inputs
108 font-weight: $font-weight-normal;
109 line-height: $input-line-height;
110 color: $input-group-addon-color;
113 background-color: $input-group-addon-bg;
114 border: $input-border-width solid $input-group-addon-border-color;
115 @include border-radius($input-border-radius);
117 // Nuke default margins from checkboxes and radios to vertically center within.
119 input[type="checkbox"] {
127 // Remix the default form control sizing classes into new ones for easier
130 .input-group-lg > .form-control:not(textarea),
131 .input-group-lg > .custom-select {
132 height: $input-height-lg;
135 .input-group-lg > .form-control,
136 .input-group-lg > .custom-select,
137 .input-group-lg > .input-group-prepend > .input-group-text,
138 .input-group-lg > .input-group-append > .input-group-text,
139 .input-group-lg > .input-group-prepend > .btn,
140 .input-group-lg > .input-group-append > .btn {
141 padding: $input-padding-y-lg $input-padding-x-lg;
142 font-size: $input-font-size-lg;
143 line-height: $input-line-height-lg;
144 @include border-radius($input-border-radius-lg);
147 .input-group-sm > .form-control:not(textarea),
148 .input-group-sm > .custom-select {
149 height: $input-height-sm;
152 .input-group-sm > .form-control,
153 .input-group-sm > .custom-select,
154 .input-group-sm > .input-group-prepend > .input-group-text,
155 .input-group-sm > .input-group-append > .input-group-text,
156 .input-group-sm > .input-group-prepend > .btn,
157 .input-group-sm > .input-group-append > .btn {
158 padding: $input-padding-y-sm $input-padding-x-sm;
159 font-size: $input-font-size-sm;
160 line-height: $input-line-height-sm;
161 @include border-radius($input-border-radius-sm);
164 .input-group-lg > .custom-select,
165 .input-group-sm > .custom-select {
166 padding-right: ($custom-select-padding-x + $custom-select-indicator-padding);
170 // Prepend and append rounded corners
172 // These rulesets must come after the sizing ones to properly override sm and lg
173 // border-radius values when extending. They're more specific than we'd like
174 // with the `.input-group >` part, but without it, we cannot override the sizing.
177 .input-group > .input-group-prepend > .btn,
178 .input-group > .input-group-prepend > .input-group-text,
179 .input-group > .input-group-append:not(:last-child) > .btn,
180 .input-group > .input-group-append:not(:last-child) > .input-group-text,
181 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
182 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
183 @include border-right-radius(0);
186 .input-group > .input-group-append > .btn,
187 .input-group > .input-group-append > .input-group-text,
188 .input-group > .input-group-prepend:not(:first-child) > .btn,
189 .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
190 .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
191 .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
192 @include border-left-radius(0);