mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
Alternate fix to #17965: Updates to use the new class name and adds some basic docs for custom checkbox/radio validation
This commit is contained in:
parent
a40d94000f
commit
09aefaa2af
@ -762,6 +762,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
|
|||||||
</label>
|
</label>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
|
#### Validation states
|
||||||
|
|
||||||
|
Add other states to your custom forms with our validation classes.
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<div class="form-group has-success">
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input">
|
||||||
|
<span class="custom-control-indicator"></span>
|
||||||
|
<span class="custom-control-description">Check this custom checkbox</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-warning">
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input">
|
||||||
|
<span class="custom-control-indicator"></span>
|
||||||
|
<span class="custom-control-description">Check this custom checkbox</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-danger m-b-0">
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input">
|
||||||
|
<span class="custom-control-indicator"></span>
|
||||||
|
<span class="custom-control-description">Check this custom checkbox</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
#### Stacked
|
#### Stacked
|
||||||
|
|
||||||
|
@ -14,7 +14,8 @@
|
|||||||
&.radio label,
|
&.radio label,
|
||||||
&.checkbox label,
|
&.checkbox label,
|
||||||
&.radio-inline label,
|
&.radio-inline label,
|
||||||
&.checkbox-inline label {
|
&.checkbox-inline label,
|
||||||
|
.custom-control {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
// Set the border and box shadow on specific inputs to match
|
// Set the border and box shadow on specific inputs to match
|
||||||
|
Loading…
Reference in New Issue
Block a user