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" />