Css 尝试覆盖Bootstrap4复选框样式

我正在尝试复制此自定义复选框

codepen

但在我的项目的其余部分，我使用bootstrap4，它以某种方式覆盖了我的costom复选框

这是我的测试

我的测试

如您所见，与工作示例相比，我在输入中添加了一个.myCheckbox类。我有点困惑于如何将引导覆盖到cosutm复选框

有人有什么建议吗？非常感谢
尝试替换以下CSS。这可能是你的正确答案。由于字体系列和其他一些与CSS相关的东西，这种行为与其他行为不同

input.myCheckbox[type=checkbox] + label:before {
    content: "\2714";
    border: 0.1em solid #000;
    border-radius: 0.2em;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    padding-left: 0;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
}

您需要确保css选择器比引导选择器更具体。例如，参见CSS专一性的MDN页面：您的
元素确实应用了您的样式；您的选择器比引导选择器具有更高的特异性。到底是什么问题？应该发生什么，以及您当前的代码与此有何不同？复选标记应为白色并位于复选框的中心。我的是绿色的，挂在一边。如果我删除bootstrap4 cdn，它就会工作。我添加了class=“myCheckbox”以使其更加具体并覆盖引导，但这似乎没有帮助。@geogrow简单的解决方法是添加
！重要信息
在每个样式值之后。（这是一种不好的做法，但对于修补程序很有用）确实将复选标记放在了复选框的中心。但复选标记本身仍然是绿色的。有趣的是，如果我在Android手机上打开密码笔，复选标记是白色的，但在chrome和IE中是绿色的。我正在尝试学习如何制作自定义复选框，但也许我应该尝试另一种方法。@geogrow它能解决您的问题吗？对于浏览器问题，您必须检查每个浏览器并进行相应更新。如果这解决了您的问题，请标记为已接受。