Question

我正在尝试复制此自定义复选框codepen https://codepen.io/zFunx/pen/dWbevd?editors=0100

但是对于我的项目的其余部分，我使用bootstrap4并以某种方式覆盖我的costom复选框。

以下是我的测试My test https://codepen.io/GitMorin/pen/aEXrJq

正如您所看到的，我已将.myCheckbox类添加到输入中，与工作示例相比较。我对如何将bootstrap覆盖到cosutm复选框感到困惑。

有没有人有任何建议？非常感谢

Answer 1

尝试替换以下CSS。这可能是你的正确答案。由于font-family和其他一些与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;
}

试图覆盖Bootstrap4复选框样式

1 个答案: