xxxxxxxxxx1
<h5>2
How it is currently:3
</h5>4
<!-- Default switch -->5
<div class="form-check form-switch">6
<input class="form-check-input is-invalid" type="checkbox" id="flexSwitchCheckDefault" />7
<label class="form-check-label" for="flexSwitchCheckDefault"8
>Default switch checkbox input</label9
>10
</div>11
12
<!-- Checked switch -->13
<div class="form-check form-switch">14
<input class="form-check-input is-invalid" type="checkbox" id="flexSwitchCheckChecked" checked />15
<label class="form-check-label" for="flexSwitchCheckChecked"16
>Checked switch checkbox input</label17
>18
</div>19
20
<!-- Default disabled switch -->21
<div class="form-check form-switch">22
<input class="form-check-input is-invalid" type="checkbox" id="flexSwitchCheckDisabled" disabled />23
<label class="form-check-label" for="flexSwitchCheckDisabled"24
>Disabled switch checkbox input</label25
>26
</div>27
28
<!-- Checked disabled switch -->29
<div class="form-check form-switch">30
<input31
class="form-check-input is-invalid"32
type="checkbox"33
id="flexSwitchCheckCheckedDisabled"34
checked35
disabled36
/>37
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled"38
>Disabled checked switch checkbox input</label39
>40
</div>41
42
<h5 class="mt-5">43
How it should look like IMHO:44
</h5>45
46
<!-- Default switch -->47
<div class="form-check form-switch form-switch-fixed">48
<input class="form-check-input is-invalid" type="checkbox" id="flexSwitchCheckDefault" />49
<label class="form-check-label" for="flexSwitchCheckDefault"50
>Default switch checkbox input</label51
>52
</div>53
54
<!-- Checked switch -->55
<div class="form-check form-switch form-switch-fixed">56
<input class="form-check-input is-invalid" type="checkbox" id="flexSwitchCheckChecked" checked />57
<label class="form-check-label" for="flexSwitchCheckChecked"58
>Checked switch checkbox input</label59
>60
</div>61
62
<!-- Default disabled switch -->63
<div class="form-check form-switch form-switch-fixed">64
<input class="form-check-input is-invalid" type="checkbox" id="flexSwitchCheckDisabled" disabled />65
<label class="form-check-label" for="flexSwitchCheckDisabled"66
>Disabled switch checkbox input</label67
>68
</div>69
70
<!-- Checked disabled switch -->71
<div class="form-check form-switch form-switch-fixed">72
<input73
class="form-check-input is-invalid"74
type="checkbox"75
id="flexSwitchCheckCheckedDisabled"76
checked77
disabled78
/>79
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled"80
>Disabled checked switch checkbox input</label81
>82
</div>83
84
<!-- Default switch -->85
<div class="form-check form-switch form-switch-fixed">86
<input class="form-check-input is-valid" type="checkbox" id="flexSwitchCheckDefault" />87
<label class="form-check-label" for="flexSwitchCheckDefault"88
>Default switch checkbox input</label89
>90
</div>91
92
<!-- Checked switch -->93
<div class="form-check form-switch form-switch-fixed">94
<input class="form-check-input is-valid" type="checkbox" id="flexSwitchCheckChecked" checked />95
<label class="form-check-label" for="flexSwitchCheckChecked"96
>Checked switch checkbox input</label97
>98
</div>99
100
<!-- Default disabled switch -->101
<div class="form-check form-switch form-switch-fixed">102
<input class="form-check-input is-valid" type="checkbox" id="flexSwitchCheckDisabled" disabled />103
<label class="form-check-label" for="flexSwitchCheckDisabled"104
>Disabled switch checkbox input</label105
>106
</div>107
108
<!-- Checked disabled switch -->109
<div class="form-check form-switch form-switch-fixed">110
<input111
class="form-check-input is-valid"112
type="checkbox"113
id="flexSwitchCheckCheckedDisabled"114
checked115
disabled116
/>117
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled"118
>Disabled checked switch checkbox input</label119
>120
</div>xxxxxxxxxx1
.form-switch-fixed.form-switch .form-check-input.is-invalid:checked[type=checkbox]:after {2
background-color: #951d32;3
}4
5
.form-switch-fixed.form-switch .form-check-input.is-valid:checked[type=checkbox]:after {6
background-color: #006e2c;7
}1
1
Console errors: 0