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

Question

以下是bootstrap4的新复选框：Bootstrap4 checkbox：

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

默认情况下隐藏默认<input>复选框，仅在点击时可见。有没有办法让它始终可见。

小提琴：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