Css 将@Html.CheckBoxFor设置为滑块

我无法将

@Html.CheckBoxFor（）

生成的复选框设置为滑块

我已经确定“罪魁祸首”是隐藏的输入字段。我已经做了一个例子来说明这个问题。它包含3个复选框-一个是由

@Html.CheckBoxFor（）

生成的，第二个是使用

@Html.CheckBoxFor（）

生成的代码并注释掉隐藏的输入，第三个是经典复选框

您将看到滑块不适用于第一个滑块。我确实需要使用

@Html.CheckBoxFor（）

我认为：

<div class="slider">
    @Html.CheckBoxFor(m => m.IsChecked, new { @class = "toggle-pill" })
    @Html.LabelFor(m => m.IsChecked, new { @class = "toggle-label" })
</div>

模型属性
IsChecked
，是
bool
的类型。问题是
.slider[type=“checkbox”]：checked+。切换标签{
和
.slider[type=“checkbox”]：checked+。切换标签：：在{
之前使用选择下一个同级的

由于
CheckboxFor（）
在
之后立即生成一个
，因此选择器选择了错误的元素（隐藏的输入，而不是标签）

您需要修改css以使用，以便您的css成为

.slider [type="checkbox"]:checked ~ .toggle-label {
    background: #93ed49;
}

.slider [type="checkbox"]:checked ~ .toggle-label::before {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

我假设您为此使用了一个插件，因此您可以修改原始文件，或者添加一个包含上述内容的附加css文件

请参阅它的工作原理。
您需要在问题中添加更多的代码细节，以便添加答案。但我必须表明，使用
@CheckBoxFor（）
可以工作-只需对CSSY稍作修改即可。您的小提琴修复了它。请提交答案，以便我可以接受。谢谢：）
.slider [type="checkbox"]:checked ~ .toggle-label {
    background: #93ed49;
}

.slider [type="checkbox"]:checked ~ .toggle-label::before {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}