custom-checkbox and is-valid/is-invalid not working due to priority clashs
See original GitHub issueVersion
Bootstrap 4.0.0
Problem
Using a custom checkbox and the server side validation classes is-valid
/is-invalid
does not work.
The CSS definitions for this behavior are:
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
 background-color: #007bff;
}

.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
background-color: #e4606d;
}
The first definition provides the blue color on the normal checked checkbox. The second definition is supposed to override the color to the invalid red. If I count correctly, they have the same priority, so the second definition never applies.
<div class="custom-control custom-checkbox">
<input checked type="checkbox" class="custom-control-input is-invalid" id="box1">
<label class="custom-control-label" for="box1"></label>
</div>
Possible solutions
- In the mixin
form-validation-state
specify also.custom-checkbox
and others to match the full definition and make it more specific.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:7 (1 by maintainers)
Top Results From Across the Web
No results found
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The issue is clearly reproduced and visible online. Please reopen it and review
@mdo please reopen.
Here’s an example: (v4.0.0) http://jsbin.com/buseke/4/edit?html,output (v4.1.0) http://jsbin.com/buseke/5/edit?html,output