mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Merge branch 'input-group-custom-forms' into v4-dev
This commit is contained in:
Mark Otto
commit
2f90be3150
2 changed files with 122 additions and 6 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
|||
Loading…
Reference in a new issue