mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-12 00:08:59 +01:00
Merge pull request #19139 from twbs/v4-custom-forms-validation
v4: Validation states on custom forms
This commit is contained in:
commit
6ec9aa34a4
@ -764,6 +764,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