html - 为什么单击时我的切换 slider 不动？

Question

我找到了一些创建 slider 的代码，但我似乎无法在单击输入时发生移动。它在激活时实际上没有做任何事情。我使用 SASS 作为我的预处理器。我能够在屏幕上看到开关，但是当我单击以激活滑动功能时，没有任何反应。

HTML

<div className='prefilloptions_container'>
    <div className='prefilloptions'>
        <label>Defaults</label>
        <input type='checkbox' name='default' value='yes' />
        <span className='slider round' />
    </div>
</div>

SCSS

.prefilloptions_container {
    display: flex;
    justify-content: center;
    width: 100%;
    .prefilloptions {
        width: 5vw;
        height: auto;
        position: relative;
        display: inline-block;
        & input {
            opacity: 0;
            width: 0;
            height: 0;
            &:checked {
                background-color: #2196f3;
            }
            &:focus {
                box-shadow: 0 0 1px #2196f3;
            }
        }
        label {
            margin-right: 0.5vw;
        }
        input:checked + .slider {
            background-color: #2196f3;
        }
        input:checked + .slider::before {
            transform: translateX(26px);
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #2196f3;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: -3px;
            left: 70px;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            width: 2vw;
            height: 1.7vh;
            &::before {
                position: absolute;
                content: '';
                height: 15px;
                width: 15px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                transition: 0.4s;
            }
            &.round {
                border-radius: 34px;
                width: 1.7vw;
                &::before {
                    border-radius: 50%;
                }
            }
        }
    }
}

Answer 1

看来我能解决这个问题。显然，我需要用 label 元素包围 input 和 span 元素，而不是让 label 元素独占一行。

旧代码

<div className='prefilloptions_container'>
    <div className='prefilloptions'>
        <label>Defaults</label>
        <input type='checkbox' />
        <span className='slider round' onClick={alertMe} />
    </div>
</div>

新代码

<div className='prefilloptions_container'>
    <div className='prefilloptions'>
        <label>
            Defaults
            <input type='checkbox' />
            <span className='slider round' onClick={alertMe} />
        </label>
    </div>
</div>