I'm trying to style a Bootstrap 4 checkbox without a label:
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1">
</div>
My trial and error styles:
.form-check {
.form-check-input {
color: #2c2b2c;
font-size: 12px;
line-height: 2.7;
padding-left:15px;
text-transform: uppercase;
background-color: red;
}
.form-check-input::after,
.form-check-input::before {
height: 25px;
width: 25px;
}
.form-check-input::before {
background-color: #fff;
border: 1px solid #2c2b2c;
}
}
}
I'm able to style the label version, but unsuccessful with this version.
UPDATE: As @mebin-joe mentioned, this is a known issue: https://github.com/twbs/bootstrap/issues/26221 I ended up using the custom Bootstrap checkbox element and styled it:
.custom-checkbox .custom-control-input:checked~.custom-control-label::before
{
background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
background-color: #caca4c;
}
It seems that with bootstrap 4.5.0 following works
<div class=" custom-control custom-radio">
<label id="N1" class="sr-only">XXX</label>
<input class="custom-control-input" aria-labelledby="N1" type="radio" value="XX">
<span class="custom-control-label"></span>
</div>
or depending of the need just
<div class=" custom-control custom-radio">
<label for="N1" class="sr-only">XXX</label>
<input id="N1" class="custom-control-input" type="radio" value="XX">
<span class="custom-control-label"></span>
</div>
Please use the following Codes it will work:
<div class="custom-control custom-radio" role="group">
<input
type="radio"
name="quest-27"
id="quest-27-10"
class="custom-control-input"
value="1">
<label class="custom-control-label">
<span class="sr-only">Never</span>
</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With