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

【问题标题】：Make checkbox always visible in Bootstrap 4使复选框在 Bootstrap 4 中始终可见
【发布时间】：2016-04-09 07:39:31
【问题描述】：

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

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

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

小提琴：jsFiddle

编辑：这是我希望它默认的样子。

【问题讨论】：

你能详细说明the default checkbox is always hidden吗？
我的意思是它默认是隐藏的。你可以查看我添加的jsFiddle。
也许可以更改正文背景颜色以清楚地看到它。
你要默认复选框checked吗？ -
我希望该复选框默认未选中，当您手动取消选中它时会出现蓝色边框。

标签： twitter-bootstrap css twitter-bootstrap-4 bootstrap-4

【解决方案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.

【讨论】：