使用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 {
	position: relative;
}

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

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

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

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

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