样式@Html。复选框用作滑块

我在设置由生成的复选框的样式时遇到问题 @Html.CheckBoxFor()

我已经确定“罪魁祸首”是隐藏的输入字段。我做了一个 fiddle 来说明这个问题。它包含3个复选框-一个由 @Html。复选框() ,第二个使用 @Html。复选框() 隐藏输入被注释掉,第三个经典复选框。

您将看到滑块不适用于第一个滑块。我确实需要使用 @Html。复选框()

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

这个用于设置样式的css:

.slider [type="checkbox"] {
    display: none;
}

.slider .toggle-label {
    display: block;
    width: 40px;
    height: 20px;
    position: relative;
    background: #ed495c;
    border-radius: 10px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.slider .toggle-label::before {
    content: '';
    display: block;
    width: 50%;
    height: 100%;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d1d1d1;
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 0.2s ease-in-out;
}

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

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

模型属性, IsChecked bool .