如何使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複選框滑塊正常工作？

回答

相關問題