将@Html.CheckBoxFor 设置为滑块答案

【问题标题】：Styling @Html.CheckBoxFor as a slider将@Html.CheckBoxFor 设置为滑块
【发布时间】：2018-02-23 08:32:19
【问题描述】：

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

我已确定“罪魁祸首”是隐藏的输入字段。我做了一个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。

【问题讨论】：

您需要在问题中添加更多代码细节才能添加答案。但我有 forked the fiddle 表明使用 @CheckBoxFor() 可以工作 - 只需要对 css 进行少量修改
你的小提琴修复了它.. 提交答案，所以我可以接受。谢谢:)

标签： css asp.net-mvc checkbox slider html-helper

【解决方案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 了解其工作原理。

【讨论】：