Checkbox bootstrap 4.1.x中的自定义复选框

我需要这样一个复选框或类似的

有很多关于设置复选框样式的答案，但是在Bootstrap4.1.x中没有一个是有效的，要么是我用错了，要么是它们在这个bootstrap版本中不起作用

选中此自定义复选框

更改

 <span class="custom-control-description">Check this custom checkbox</span>

。自定义控件输入：选中~。自定义控件标签：：之前{
颜色：白色！重要；
背景色：绿色！重要；
}

选中此自定义复选框

以下是使用引导和FontStrap创建自定义复选框的方法

.自定义复选框{
填充：0；
}
.custom复选框.fa切换打开，
.custom复选框.fa关闭{
字体大小：135%；
/*此图标相对较小*/
}
.自定义复选框输入[类型=复选框]{
能见度：塌陷；
宽度：0px；
左边距：-0.25em；
}
.custom checkbox输入[type=checkbox]~.custom检查{
显示：无；
}
.自定义复选框输入[类型=复选框]：选中~.自定义选中{
显示：内联；
}
.自定义复选框输入[类型=复选框]：选中~.自定义复选框{
显示：无；
}
.自定义复选框输入[类型=复选框]：已禁用~*{
颜色：#b6b4b4；
}
.custom checkbox输入[type=checkbox]。错误~。.custom check on，
.custom复选框输入[type=checkbox]。错误~。自定义复选框已关闭{
边框：实心2px红色；
}
.自定义复选框i.btn{
溢出：隐藏；
颜色：透明；
位置：相对位置；
显示：内联块；
宽度：3em；
填充：0；
字体风格：普通；
}
.custom复选框。btn:之后{
内容：“；
字体风格：普通；
边框：7px纯白；
位置：绝对位置；
排名：0；
底部：0；
边界半径：5px；
}
.custom复选框。自定义检查。btn:之后{
右：-4px；
}
.自定义复选框。自定义复选框。btn:之后{
左：-4px；
}
.custom复选框。自定义检查。btn:之前{
内容：“关于”；
颜色：白色；
左边距：-10px；
}
.自定义复选框。自定义复选框。btn:之前{
内容：“关”；
颜色：#333；
右边距：-15px；
}
.custom复选框输入[类型=复选框]：选中~.btn.custom-check-on{
显示：内联块；
}

使用引导和字体创建自定义复选框
下面是一些自定义复选框的示例。你几乎可以使用任何形状或颜色，使他们的方式，你喜欢它

复选框


复选框


复选框


复选框


复选框


复选框

好，请编辑问题并添加您需要的内容tried@Justcode更新了问题，请看一看我回答了这个问题你可以选择任何样式谢谢：），如何更改复选框的颜色，如果需要完整的方形边而不是平滑边怎么办。你能帮个忙吗？如果你想改变颜色，你现在有一些类将颜色应用于它，然后扩展这些类

。自定义控件输入：选中~。自定义控件标签：：在{color:#fff！重要；边框颜色：#3d7c54！重要；背景颜色：#175a11！重要；}之前

@WasiF：我想从HTML中删除

自定义控件指示符的使用，因为您完全是在CSS中这样做的。此外，最新版本的引导（v4.0.0+）中不存在自定义控制指示器类。它在4.0.0-alpha.6中成功了。
<span class="custom-control-label">Check this custom checkbox</span>