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

Question

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

twitter-bootstrapcsstwitter-bootstrap-4bootstrap-4

3

这里是来自Bootstrap4的新复选框：Bootstrap4复选框。

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

默认情况下，<input> 复选框默认处于隐藏状态，只有在点击时才会显示。是否有一种方法可以使它始终可见。

示例：jsFiddle 编辑：这是我想要的默认效果。

- Zeeshan

你能详细说明一下“默认复选框始终隐藏”吗？ - Drew Kennedy

我的意思是默认情况下它是隐藏的。您可以查看我添加的jsFiddle。 - Zeeshan

你想默认选中复选框吗？ - Denis Tsoi

我希望复选框默认为未选中状态，并且具有手动取消选择时出现的蓝色边框。 - Zeeshan

问题没有意义。 - charlietfl

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Donnelly · Accepted Answer

那是当复选框本身获得焦点时应用于 .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。