Add input group support for custom selects and custom files

Closes #24437, closes #22457

diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html
index ecedf7c4d6d5714a756af74581ae084dc76aacb8..4f3e68738de2835d671faaa841be277085273888 100644 (file)
--- a/_includes/docs-navbar.html
+++ b/_includes/docs-navbar.html
@@ -37,7 +37,7 @@
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
         <a class="dropdown-item active" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/">Latest (4.x)</a>
         <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
-        <a class="dropdown-item" href="https://getbootstrap.com/3.3/">v3.3.7</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
         <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
       </div>
     </li>

diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index 231adc906ccc1aba4603f64ef7d870cd8de6c856..251af2a01c0cbd1bef774f5a81008f9eb31ea15e 100644 (file)
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -106,7 +106,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 +229,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">
+  <span class="input-group-addon" id="">Options</span>
+  <select class="custom-select" id="">
+    <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="">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <span class="input-group-addon" id="">Options</span>
+</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="">
+    <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="">
+    <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" id="">Upload</span>
+  <label class="custom-file">
+    <input type="file" id="file" 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="file" 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="file" 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="file" 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 a1d16e3848e7fd773951d9a3f9753179dcb30eb1..d242c904fd7dd39aaab3c3169f91258c49a87b72 100644 (file)
--- 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;
+  }
 }
 
 //