为不带标签的 Bootstrap 4 复选框设置样式答案

【问题标题】：Style a Bootstrap 4 Checkbox without label为不带标签的 Bootstrap 4 复选框设置样式
【发布时间】：2019-07-18 18:55:02
【问题描述】：

我正在尝试为不带标签的 Bootstrap 4 复选框设置样式：

<div class="form-check">
    <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1">
</div>

我的试错风格：

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

我可以设置标签版本的样式，但使用此版本不成功。

更新：正如@mebin-joe 提到的，这是一个已知问题：https://github.com/twbs/bootstrap/issues/26221 我最终使用了自定义 Bootstrap 复选框元素并对其进行了样式设置：

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

【问题讨论】：

这是一个已知问题。此处讨论了一些解决方法github.com/twbs/bootstrap/issues/26221
:before 和 :after 是伪元素，不适用于像输入这样的自闭标签。
基本输入字段不支持:before和:after
你的问题已经被问过了，you can find the answer here。
@melissaSkywalkz 我看到了这个问题，但我的问题是关于 Bootstrap。

标签： css checkbox sass bootstrap-4

【解决方案1】：

似乎使用 bootstrap 4.5.0 以下作品

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

或视需要而定

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

【讨论】：

【解决方案2】：

请使用以下代码即可：

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

【讨论】：