将 @Html.CheckBoxFor 样式化为滑块

Question

我在将 @Html.CheckBoxFor() 生成的复选框样式设置为滑块时遇到问题。

我已经确定 "culprit" 是隐藏的输入字段。我做了一个 fiddle 来说明这个问题。它包含 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>

用于样式化的 .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。

Answer 1

问题是 .slider [type="checkbox"]:checked + .toggle-label { 和 .slider [type="checkbox"]:checked + .toggle-label::before { 的 css 使用 adjacent sibling combinator (+) 选择下一个兄弟。

因为 CheckboxFor() 在 <input type="checkbox" .. /> 之后立即生成 <input type="hidden" .. />，选择器选择了错误的元素（隐藏输入，而不是标签）。

你需要修改css来使用general sibling combinator (~)，这样你的css就变成了

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

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

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

参考 this forked fiddle 了解其工作原理。

将 @Html.CheckBoxFor 样式化为滑块

Styling @Html.CheckBoxFor as a slider

css

asp.net-mvc

checkbox

slider

html-helper