使复选框在 Bootstrap 中始终可见 4

Question

这是来自 bootstrap4 的新复选框：Bootstrap4 checkbox:

<label class="c-input c-checkbox">
    <input type="checkbox">
    <span class="c-indicator"></span>
    Click here
 </label>

默认的 <input> 复选框默认是隐藏的，只有在点击时才可见。有什么办法让它一直可见吗

Fiddle : jsFiddle

编辑：这是我希望的默认设置。

Answer 1

这是选中复选框本身时应用于 .c-indicator 元素的样式：

.c-input>input:focus~.c-indicator {
  -webkit-box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
  box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
}

如果您希望始终应用该样式，只需在您自己的 CSS 中重复使用该样式声明，完全删除 .c-input>input:focus~：

.c-indicator {
  -webkit-box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
  box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
}

Modified JSFiddle.