CSS3 Implementing Switch Component Switches

This article mainly and you introduced how to use CSS3 to implement the switch component of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Form-based checkbox

Principle

CheckBox, there are two states, unchecked and selected, when elected (: checked), change the style can be, first of all to clear the browser default style, Apperance:none, this article code only run in Chrome, if you need to write compatibility code, Just give apperance and transition a prefix.

HTML code

<input class= ' switch-component ' type= ' checkbox ' >

CSS Code

//switch component. switch-component {position:relative;  width:60px;  height:30px;  Background-color: #dadada;  border-radius:30px;  Border:none;  Outline:none;  -webkit-appearance:none; Transition:all. 2s ease;}  Button Switch-component::after {content: ';  Position:absolute;  top:0;  left:0;  width:50%;  height:100%;  Background-color: #fff;  border-radius:50%; Transition:all. 2s ease; }//checked status, the background color changes. switch-component:checked {background-color: #86c0fa;} Checked status, the button position changes. switch-component:checked::after {left:50%;}