Style a Bootstrap 4 Checkbox without label

Question

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;
}

This is a known issue. Some workarounds are discussed here https://github.com/twbs/bootstrap/issues/26221 — Mebin Joe, Feb 25 '19 at 11:30
:before and :after are pseudo elements which wont work for Self-Closing tags like input. — Tushar, Feb 25 '19 at 11:31
Your question has already been asked before, [you can find the answer here](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css). — Melissa Skywalkz, Feb 25 '19 at 11:40
@melissaSkywalkz i saw that question, but mine is regarding Bootstrap. — Ricky, Feb 25 '19 at 12:47

score 2 · Answer 1 · answered Jun 08 '20 at 10:48

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>

score 1 · Answer 2 · answered Dec 18 '20 at 00:04

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>

Style a Bootstrap 4 Checkbox without label

2 Answers2