Html 如何使HTTP/CSS复选框滑块正常工作？

如果你能帮助我，我会很高兴的。 我被要求开发一个复选框滑块

问题是，当我点击滑块时，我需要发生两件事：

当滑块位于左侧时，“特定”字将被隐藏 只有在单击将变为的块后才会显示 右边

滑动将出现在动画中

代码如下：

HTML:
=====
<div class="checkboxThree">
   <input type="checkbox" value="0" id="checkboxThreeInput" name="" />
   <label for="checkboxThreeInput"></label>
</div>

CSS:
====
/**
 * Checkbox Three
 */
.checkboxThree {
    width: 95px;
    height: 16px;
    background:#A22452;
    border-radius: 50px;
    position: relative;
    margin:0 auto;
    margin-top: 5px;
}

    /**
     * Create the text for the "All" position
     */
    .checkboxThree:before {
      content: 'All';
      position: absolute;
      top: -1px;
      left: 70px;
      height: 2px;
      color: #F9F9F9;
      font-size: 14px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-weight: bold;
    }

    /**
     * Create the label for the "Specific" position
     */
    .checkboxThree:after {
       content: 'Specific';
       position: absolute;
       top: -1px;
       left: 4px;
       height: 2px;
       color: #F7A6F4;
       font-size: 14px;
       font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
       font-weight: bold;
    }

    /**
     * Create the pill to click
     */
    .checkboxThree label {
        display: block;
        width: 32px;
        height: 14px;
        border-radius: 50px;
        transition: all .5s ease;
        cursor: pointer;
        position: absolute;
        top: 1px;
        z-index: 1;
        /* left: 12px; */
        background: #08EFEF;

    }

    /**
     * Create the checkbox event for the label
     */
    .checkboxThree input[type=checkbox]:checked + label {
        left: 62px;

    }

link: https://jsfiddle.net/gtq792sa/

HTML：
=====
CSS:
====
/**
*复选框三
*/
.复选框三{
宽度：95px；
高度：16px；
背景：#A22452；
边界半径：50px；
位置：相对位置；
保证金：0自动；
边缘顶部：5px；
}
/**
*为“全部”位置创建文本
*/
.复选框三：之前{
内容：“全部”；
位置：绝对位置；
顶部：-1px；
左：70像素；
高度：2倍；
颜色：#F9F9F9；
字体大小：14px；
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
字体大小：粗体；
}
/**
*为“特定”位置创建标签
*/
.复选框三：之后{
内容：“具体”；
位置：绝对位置；
顶部：-1px；
左：4px；
高度：2倍；
颜色：#F7A6F4；
字体大小：14px；
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
字体大小：粗体；
}
/**
*创建要单击的药丸
*/
.复选框3标签{
显示：块；
宽度：32px；
高度：14px；
边界半径：50px；
过渡：所有。5s轻松；
光标：指针；
位置：绝对位置；
顶部：1px；
z指数：1；
/*左：12px*/
背景#08EFEF；
}
/**
*为标签创建复选框事件
*/
.checkboxThree输入[类型=复选框]：选中+标签{
左：62px；
}
链接：https://jsfiddle.net/gtq792sa/

---

您能告诉我如何修复它吗？

您可能应该使用现有的滑块，如

它是由社区制作的引导程序的非官方组件。 我认为你可以不用引导就使用它

总之，一般来说，做这类事情最简单的方法是使用Javascript，这使您可以轻松地检查您的chexbox，检索其中的信息并设置按钮的动画。

是一个很好的答案。它可以归结为有一个标签，里面有一个input type=“slider”，还有很多css样式