如何在 Razor 页面上添加切换按钮答案

【问题标题】：How to add toggle button on Razor Page如何在 Razor 页面上添加切换按钮
【发布时间】：2021-06-29 08:38:23
【问题描述】：

如何使用 C# 在 Razor 页面上添加切换按钮？我试过用常用的 CSS 命令来做，但它不起作用。

【问题讨论】：

标签： asp.net .net asp.net-core razor-pages

【解决方案1】：

这是一个工作演示：

@page
@model IndexModel
<h2>Toggle Switch</h2>

<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>

<label class="switch">
    <input type="checkbox" checked>
    <span class="slider round"></span>
</label>

@section Scripts
{
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

            .slider.round:before {
                border-radius: 50%;
            }
    </style>
}

结果：

【讨论】：