Question

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

问题在于，当我点击滑块时，我需要做两件事：

当滑块位于左侧时，＆＃34;具体＆＃34;这个词会被隐藏并且只有在点击将转向的块后才会显示右边。
滑动将在动画中。

以下是代码：

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/

你能告诉我如何解决它吗？

Answer 1

here是一个很好的答案。它归结为具有输入类型=＆＃34;滑块＆＃34;的标签。在里面，还有很多css样式。

Answer 2

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

它是社区制作的bootstrap的非官方组件。而且我认为你可以在不使用bootstrap的情况下使用它。

无论如何，一般来说，最简单的方法就是使用Javascript，这样您就可以轻松检查chexbox，检索chexbox上的信息并为按钮设置动画。

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

2 个答案: