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

Question

我很高兴能帮助您。 我需要开发一个复选框滑块。

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

1. 当滑块在左边时，“Specific”这个词将被隐藏，并且只有在单击向右转动的块后才会显示出来。 2. 滑动应该有动画效果。

以下是代码：

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/

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

- EVH671

Answer 1

这里是一个不错的答案。它的核心在于在标签内嵌套一个input type="slider"的输入框，并进行大量的css样式设计。

- dekzok