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

Question

I'll be glad if you can help me. I was required to develop a checkbox slider.

The issue is that when I click on the Slider I need that 2 things will happen:

1. When the slider block is on left, the "Specific" word will be hidden and will be shown only after clicking the block which will turn to the right side.

2. That the sliding will be in an animation.

Here's the code:

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/

Can you please show me how to fix it ?

Answer 1

here is a nice answer. It comes down to having a label with an input type="slider" inside it, and lots of css styling.

Answer 2

You should probably use an existing slider like Bootstrap Switch

It's an unofficial component for bootstrap made by the community. And I think you can use it without bootstrap.

Anyway, in general the easiest way to do this kind of stuff is using Javascript, this allow you to easily check your chexbox, retrieve information on it and animate your button.