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

Question

这是 bootstrap4 中的新复选框：Bootstrap4 复选框：

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

修改 JSFiddle。