使用html5和css3切換開關

Question

我正在製作一個混合應用程序，我想在其上顯示一個帶有自定義圖標的切換開關。任何想法如何實現這一點。

Answer 1

使用這個簡單的代碼

$(".switch").click(function(){ 
 
    $(this).toggleClass("on"); 
 
});

.switch { 
 
    width: 100px; 
 
    height: 30px; 
 
    border: 1px solid gray; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
} 
 

 
.switch > div { 
 
    width: 50%; 
 
    height: 100%; 
 
    background: #A81414; 
 
    margin-left: 0px; 
 
    transition: all 1s; 
 
} 
 

 
.switch.on > div { 
 
    margin-left: 50%; 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="switch"> 
 
    <div></div> 
 
</div>

Answer 2

看到這個搗鼓您的要求。 https://jsfiddle.net/vz9zufk0/

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<h1>Toggle.</h1> 
<a href="#" class="toggle toggle--on"></a> 
<script> 
$('.toggle').click(function(e) { 
    var toggle = this; 

    e.preventDefault(); 

    $(toggle).toggleClass('toggle--on') 
     .toggleClass('toggle--off') 
     .addClass('toggle--moving'); 

    setTimeout(function() { 
    $(toggle).removeClass('toggle--moving'); 
    }, 200) 
}); 
</script> 

Answer 3

我採用非的js的解決方案，但要注意的Firefox將不能正確地顯示它（一個簡單的複選框會顯示雖然）。

input[type="checkbox"].checkboxStyle { 
 
\t position: relative; 
 
} 
 

 
input[type="checkbox"].checkboxStyle, 
 
input[type="checkbox"].checkboxStyle:before { 
 
\t width: 77px; 
 
\t height: 28px; 
 
} 
 

 
input[type="checkbox"].checkboxStyle:before { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t background-image: url('http://image.noelshack.com/fichiers/2016/22/1464687124-checkbox.png'); 
 
\t cursor: pointer; 
 
\t transition: background 0.15s ease, color 0.15s ease; 
 
} 
 

 
input[type="checkbox"].checkboxStyle:not(:checked):before { 
 
\t background-position-x: -46px; 
 
} 
 

 
input[type="checkbox"].checkboxStyle:checked:before { 
 
\t background-position-x: 0px; 
 
}

<input type="checkbox" class="checkboxStyle" />