diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index 231adc906ccc1aba4603f64ef7d870cd8de6c856..011a1edc75d86c26ba4f548b72b4bb5459520ec6 100644
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -1,11 +1,13 @@
---
layout: docs
title: Input group
-description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
+description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
group: components
toc: true
---
+
+
## Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
@@ -106,7 +108,6 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
{% endexample %}
-
## Button addons
Buttons in input groups must wrapped in a `.input-group-btn` for proper alignment and sizing. This is required due to default browser styles that cannot be overridden.
@@ -230,6 +231,98 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen
</div>
{% endexample %}
+## Custom forms
+
+Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
+
+### Custom select
+
+{% example html %}
+<div class="input-group mb-3">
+ <label class="input-group-addon" for="inputGroupSelect01">Options</label>
+ <select class="custom-select" id="inputGroupSelect01">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+</div>
+
+<div class="input-group mb-3">
+ <select class="custom-select" id="inputGroupSelect02">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <label class="input-group-addon" for="inputGroupSelect02">Options</label>
+</div>
+
+<div class="input-group mb-3">
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Button</button>
+ </span>
+ <select class="custom-select" id="inputGroupSelect03">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+</div>
+
+<div class="input-group">
+ <select class="custom-select" id="inputGroupSelect04">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Button</button>
+ </span>
+</div>
+{% endexample %}
+
+### Custom file input
+
+{% example html %}
+<div class="input-group mb-3">
+ <span class="input-group-addon">Upload</span>
+ <label class="custom-file">
+ <input type="file" id="inputGroupFile01" class="custom-file-input" required>
+ <span class="custom-file-control"></span>
+ </label>
+</div>
+
+<div class="input-group mb-3">
+ <label class="custom-file">
+ <input type="file" id="inputGroupFile02" class="custom-file-input" required>
+ <span class="custom-file-control"></span>
+ </label>
+ <span class="input-group-addon" id="">Upload</span>
+</div>
+
+<div class="input-group mb-3">
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Button</button>
+ </span>
+ <label class="custom-file">
+ <input type="file" id="inputGroupFile03" class="custom-file-input" required>
+ <span class="custom-file-control"></span>
+ </label>
+</div>
+
+<div class="input-group">
+ <label class="custom-file">
+ <input type="file" id="inputGroupFile04" class="custom-file-input" required>
+ <span class="custom-file-control"></span>
+ </label>
+ <span class="input-group-btn">
+ <button class="btn btn-secondary" type="button">Button</button>
+ </span>
+</div>
+{% endexample %}
+
## Accessibility
Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index ae70ebc081ebf9fcc55f796a479b57580a7e1826..9315051ffde7aabd3a7536c6ac62ae583c1dad00 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -30,20 +30,32 @@
.input-group-addon,
.input-group-btn,
-.input-group .form-control {
+.input-group .form-control,
+.input-group .custom-select,
+.input-group .custom-file {
display: flex;
align-items: center;
+
&:not(:first-child):not(:last-child) {
@include border-radius(0);
}
}
+.input-group .custom-file {
+ display: flex;
+ align-items: center;
+}
+
+.input-group .custom-select,
+.input-group .custom-file {
+ width: 100%;
+}
+
.input-group-addon,
.input-group-btn {
white-space: nowrap;
}
-
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
@@ -103,6 +115,8 @@
//
.input-group .form-control:not(:last-child),
+.input-group .custom-select:not(:last-child),
+.input-group .custom-file:not(:last-child) .custom-file-control::before,
.input-group-addon:not(:last-child),
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group > .btn,
@@ -111,10 +125,14 @@
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
+
.input-group-addon:not(:last-child) {
border-right: 0;
}
+
.input-group .form-control:not(:first-child),
+.input-group .custom-select:not(:first-child),
+.input-group .custom-file:not(:first-child) .custom-file-control,
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group > .btn,
@@ -123,8 +141,13 @@
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
-.form-control + .input-group-addon:not(:first-child) {
- border-left: 0;
+
+.form-control,
+.custom-select,
+.custom-file {
+ + .input-group-addon:not(:first-child) {
+ border-left: 0;
+ }
}
//