将@Html.CheckBoxFor 设置为滑块

2022-01-24 00:00:00 checkbox slider css asp.net-mvc html-helper

我在将 @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" 之后立即生成一个 ../>，选择器选择了错误的元素(隐藏的输入，而不是标签).

Because CheckboxFor() generates a <input type="hidden" .. /> immediately after the <input type="checkbox" .. />, the selector is choosing the wrong element (the hidden input, not the label).

您需要修改 css 以使用 通用兄弟组合器(~)，这样你的css就变成了

You need to modify the css to use the general sibling combinator (~), so that your css becomes

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

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

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

I assume your using a plugin for this, so you can either modify the original file, or add an additional css file containing the above.

请参阅 this forked fiddle 了解其工作原理.

Refer this forked fiddle to see how it works.

相关文章