复选框不检查内部data-component =“”

Question

我正在制作这个复选框列表，一切正常，直到我把它放在这个div中并将scss包装在其中：

Generic.xaml

除了CSS之外，它检查得很好。有人能告诉我发生了什么事吗？

此外，它被称为模态的原因，是因为此复选框位于模态内。起初我认为模态是搞乱的，但效果很好。出于某种原因，问题出在scss中。

这是codepen。

Answer 1

问题是你已经给出了

background: #fff;

.custom-checkbox .custom-control-indicator {

中的

这就是为什么不显示tick。

删除它并再次检查。

Answer 2

实际上它有效，您可以覆盖带有背景的检查图标，您可以通过删除或更改此行background: #fff;进行测试。

也许是这样的？

.custom-control-input:checked~.custom-control-indicator{
  background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}

希望有所帮助，