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

【问题标题】：How to make an HTTP/CSS Checkbox Slider to work properly?如何使 HTTP/CSS 复选框滑块正常工作？
【发布时间】：2018-01-08 00:58:36
【问题描述】：

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

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

当滑块在左侧时，“特定”字将被隐藏并且仅在单击将变为的块后才会显示右侧。
滑动将在动画中。

代码如下：

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 checkbox slider

【解决方案1】：

here 是一个不错的答案。它归结为有一个标签，里面有一个 input type="slider"，还有很多 css 样式。

【讨论】：

【解决方案2】：

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

它是社区制作的非官方引导组件。而且我认为您可以在没有引导程序的情况下使用它。

无论如何，一般来说，做这类事情最简单的方法是使用 Javascript，这使您可以轻松地检查您的复选框，检索其中的信息并为您的按钮设置动画。

【讨论】：