Question

我无法将@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的类型。

Answer 1

问题是，<html> <head> <?php header( 'Cache-Control: no-store, no-cache, must-revalidate' ); header( 'Cache-Control: post-check=0, pre-check=0', false ); header( 'Pragma: no-cache' ); ?> </head> <body> <?php $time=$_POST['timely']; echo $time; ?> </body> </html>和.slider [type="checkbox"]:checked + .toggle-label {的css使用选择下一个兄弟的adjacent sibling combinator (+)。

由于.slider [type="checkbox"]:checked + .toggle-label::before {会在CheckboxFor()之后立即生成<input type="hidden" .. />，因此选择器会选择错误的元素（隐藏的输入，而不是标签）。

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

<input type="checkbox" .. />

我假设你使用了一个插件，所以你可以修改原始文件，或添加一个包含上述文件的附加css文件。

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

样式化@ Html.CheckBoxFor作为滑块

1 个答案: