将@ Html.CheckBoxFor样式化为滑块 [英] Styling @Html.CheckBoxFor as a slider

问题描述

我无法将@Html.CheckBoxFor()生成的复选框设计为滑块.

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

我已将罪魁祸首"标识为隐藏的输入字段.我做了一个小提琴来说明问题.它包含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样式:

.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.

推荐答案

问题是您的.slider [type="checkbox"]:checked + .toggle-label {和.slider [type="checkbox"]:checked + .toggle-label::before {的CSS使用

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" .. />之后立即生成<input type="hidden" .. />，因此选择器选择了错误的元素(隐藏的输入，而不是标签).

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.

请参阅此分叉的小提琴，以了解其工作原理.

Refer this forked fiddle to see how it works.

这篇关于将@ Html.CheckBoxFor样式化为滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！