将@Html.CheckBoxFor 设置为滑块

Styling @Html.CheckBoxFor as a slider(将@Html.CheckBoxFor 设置为滑块)

问题描述

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

I'm having trouble styling a checkbox generated by @Html.CheckBoxFor() as a slider.

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

I've identified the "culprit" to be the hidden input field. I've made a fiddle to illustrate the problem. It contains 3 checkboxes - one generated by @Html.CheckBoxFor(), the second one using the code generated by @Html.CheckBoxFor() with the hidden input commented out and the third classic checkbox.

您将看到滑块不适用于第一个.我确实需要使用 @Html.CheckBoxFor() 因为我希望复选框绑定到我的模型上的一个属性，但无法弄清楚如何使滑块样式起作用...

You will see the slider is not working for the first one. I do need to use @Html.CheckBoxFor() because I want the checkbox to be bound to a property on my model, but can't figure out how to make the slider styling work...

在我看来，我有:

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

用于设置样式的 .css:

The .css for styling it:

.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 是 typeof bool.

The model property, IsChecked, is typeof bool.

推荐答案

问题是你的 .slider [type="checkbox"]:checked + .toggle-label { 和 .slider [type="checkbox"]:checked + .toggle-label::before { 使用 相邻兄弟组合器 (+) 选择下一个兄弟.

The issue is that your css for .slider [type="checkbox"]:checked + .toggle-label { and .slider [type="checkbox"]:checked + .toggle-label::before { use the adjacent sibling combinator (+) which selects the next sibling.

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

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

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