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

如果你能帮助我，我会很高兴。我被要求开发一个复选框滑块。如何使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/

能否请你告诉我怎么解决？

来源

2016-03-08 EVH671

你或许应该使用现有的滑块一样Bootstrap Switch

它是由社会作出引导一个非官方的组成部分。我想你可以在没有引导的情况下使用它。

无论如何，通常情况下，最简单的方法是使用Javascript，这可以让您轻松检查您的chexbox，检索信息并为您的按钮添加动画。

来源

2016-04-19 13:40:46 Riverside

here是一个很好的答案。它归结为一个带有输入类型=“滑块”的标签，以及大量的CSS样式。

来源

2018-01-07 16:58:36 dekzok

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

回答

相关问题