mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Redo checkboxes and radios
- Move disabled radio and checkbox styles to Reboot - Collapse .radio and .checkbox into single class, .form-check - Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline - Require classes for sub-elements in both new classes
This commit is contained in:
Mark Otto
parent
bd904d70c9
commit
dde85e9888
11 changed files with 122 additions and 164 deletions
|
|
@ -477,6 +477,11 @@ textarea {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled,
|
||||
input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
|
|
@ -2242,41 +2247,37 @@ select.form-control:focus::-ms-value {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
.form-check + .form-check {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
.form-check.disabled .form-check-label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio label input:only-child,
|
||||
.checkbox label input:only-child {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
margin-top: -.25rem;
|
||||
.form-check-input:only-child {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
.form-check-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 1.25rem;
|
||||
|
|
@ -2285,25 +2286,11 @@ select.form-control:focus::-ms-value {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-top: 0;
|
||||
.form-check-inline + .form-check-inline {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled, input[type="radio"].disabled,
|
||||
input[type="checkbox"]:disabled,
|
||||
input[type="checkbox"].disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio-inline.disabled,
|
||||
.checkbox-inline.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio.disabled label,
|
||||
.checkbox.disabled label {
|
||||
.form-check-inline.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css.map
vendored
2
dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -425,41 +425,41 @@ Grid-based form layouts also support large and small inputs.
|
|||
|
||||
## Checkboxes and radios
|
||||
|
||||
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
|
||||
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
|
||||
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`.
|
||||
|
||||
### Default (stacked)
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="">
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -467,29 +467,29 @@ Disabled checkboxes and radios are supported, but to provide a "not-allowed" cur
|
|||
|
||||
### Inline
|
||||
|
||||
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
|
||||
Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`.
|
||||
|
||||
{% example html %}
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -498,14 +498,14 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
|
|||
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -477,6 +477,11 @@ textarea {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled,
|
||||
input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
|
|
@ -2242,41 +2247,37 @@ select.form-control:focus::-ms-value {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
.form-check + .form-check {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
.form-check.disabled .form-check-label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio label input:only-child,
|
||||
.checkbox label input:only-child {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
margin-top: -.25rem;
|
||||
.form-check-input:only-child {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
.form-check-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 1.25rem;
|
||||
|
|
@ -2285,25 +2286,11 @@ select.form-control:focus::-ms-value {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-top: 0;
|
||||
.form-check-inline + .form-check-inline {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled, input[type="radio"].disabled,
|
||||
input[type="checkbox"]:disabled,
|
||||
input[type="checkbox"].disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio-inline.disabled,
|
||||
.checkbox-inline.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio.disabled label,
|
||||
.checkbox.disabled label {
|
||||
.form-check-inline.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css.map
vendored
2
docs/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -174,83 +174,56 @@ select.form-control {
|
|||
//
|
||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
// margin-top: ($spacer * .75);
|
||||
margin-bottom: ($spacer * .75);
|
||||
|
||||
label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
// Move up sibling radios or checkboxes for tighter spacing
|
||||
+ .form-check {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
// When there's no labels, don't position the input.
|
||||
input:only-child {
|
||||
position: static;
|
||||
&.disabled {
|
||||
.form-check-label {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
// margin-top: 4px \9;
|
||||
margin-left: -1.25rem;
|
||||
|
||||
.form-check-label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
// Move up sibling radios or checkboxes for tighter spacing
|
||||
margin-top: -.25rem;
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
margin-left: -1.25rem;
|
||||
|
||||
&:only-child {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
.form-check-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
// Apply same disabled cursor tweak as for inputs
|
||||
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&:disabled,
|
||||
+ .form-check-inline {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
// These classes are used directly on <label>s
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
// These classes are used on elements with <label> descendants
|
||||
.radio,
|
||||
.checkbox {
|
||||
&.disabled {
|
||||
label {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control feedback states
|
||||
|
|
|
|||
|
|
@ -321,6 +321,17 @@ textarea {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
// Apply a disabled cursor for radios and checkboxes.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
|
|
|
|||
Loading…
Reference in a new issue