diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html index ecedf7c4d6..4f3e68738d 100644 --- a/_includes/docs-navbar.html +++ b/_includes/docs-navbar.html @@ -37,7 +37,7 @@ diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index 231adc906c..251af2a01c 100644 --- 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 {% 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 {% 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 %} +
+ Options + +
+ +
+ + Options +
+ +
+ + + + +
+ +
+ + + + +
+{% endexample %} + +### Custom file input + +{% example html %} +
+ Upload + +
+ +
+ + Upload +
+ +
+ + + + +
+ +
+ + + + +
+{% 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 a1d16e3848..d242c904fd 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; + } } //