This article will be simple to use input[type=checkbox] and CSS3 to achieve the switch switch effect, as follows:
HTML code:
<div class= "Bg_con" >
<input id= "Checkswitch" type= "checkbox" checked= "true" class= "switch"/>
<label for= "Checkswitch" ></label>
</div>
Label label for Property: Associates the For property value with a label equal to the ID value in input, and when you click the label tag, such as Radio,checkbox will be selected or unchecked
<label for= "fruits" > Fruit </label><input type= "checkbox" id= "Fruits"/>
<label for= "Vegetables" > Vegetable </label><input type= "checkbox" id= "vegetables"/>
CSS code:
. switch{
Display:none;
}
. bg_con{
width:80px;
border:1p solid #000;
}
label{
position:relative;
Display:block;
border-radius:20px;
height:30px;
Background: #eee;
Cursor:pointer;
-webkit-user-select:none;
}
label:before{
content: ';
Display:block;
border-radius:20px;
height:30px;
Background: #fff;
border:1px solid #eee;
-webkit-transition:all 1s ease;
}
label:after{
content: ';
Display:block;
Position:absolute;
top:1px;
left:1px;
width:30px;
height:30px;
border-radius:30px;
Background: #999;
-webkit-transform:translatex (0px);
Transition:all 0.3s Ease;
}
. switch:checked~label:after{
-webkit-transform:translatex (50px);
}
. switch:checked~label:before{
Background:green;
}
transform(deformation, conversion) http://www.w3school.com.cn/cssref/pr_transform.asp
The properties of transform include: rotate ()/skew ()/scale ()/translate (,), and also X, Y, for example: Rotatex () and Rotatey (), Translatex and Translatey, and so on.
transition(transition) http://www.w3school.com.cn/css3/css3_transition.asp
Transition property values include: Transition-property (transition attribute name all required ), Transition-duration (transition period 0.3s required ), Transition-timing-function (transition mode ease required ), Transition-delay (delay time optional )
. Switch:checked~label:before (The lable tag that follows the current label when the tag of class switch is selected before)
. Switch:checked~label:after (The lable tag's pseudo-element after the current tag is selected when the class is a switch label)
Http://www.w3school.com.cn/cssref/selector_gen_sibling.asp
<script>
Using the onchange event, the listener is currently on (checked = true) or off (checked = false)
var checkswitch= document.getelementbyid (' Checkswitch ');
Checkswitch.onchange=function (event) {
Console.log (event.target.checked);
}
</script>
Making a switch switch with CSS3